时间戳

首页 > 解决方案 > 如何在 react-d3-tree 上定义单个链接样式

css - 如何在 react-d3-tree 上定义单个链接样式

问题描述

我需要以不同的方式定义每个节点之间的链接样式。现在我的树数据定义如下，而链接样式不起作用。有人可以帮忙吗？

const myTreeData = [
  {

    name: 'Top Level',
    nodeSvgShape: {
         shape: 'circle',
         shapeProps:{r:30,fill:"red"}
    },
    Styles:{
          links: {
                  fill:"none",
                  stroke: "#000",
                  strokeWidth: "2px",
                  strokeDasharray:"2,2"
                },
     }
    children: [
      {
        name: 'Level 2: A',
        nodeSvgShape: {
             shape: 'circle',
             shapeProps:{r:30,fill:”green”}
        },
        Styles:{
            links: {
                  fill:"none",
                  stroke: "#222",
                  strokeWidth: "2px",
                  strokeDasharray:"2,2"
                },
        }
      },
      {
        name: 'Level 2: B',
        nodeSvgShape: {
             shape: 'circle',
             shapeProps:{r:30,fill:”yellowfins”}
        },
        Styles:{
          links: {
                  fill:"none",
                  stroke: "#000",
                  strokeWidth: "2px",
                  strokeDasharray:"2,2"
                },
        }
      },
    ],
  },
];

nodeSvgShape 有效，因此每个节点都显示定义的颜色，但链接样式不起作用。

标签： cssd3.jshyperlinktree

解决方案

嗯，您是否尝试过使用小写 s 作为样式。这适用于我的主树对象（我不确定个人）：

 <Tree
      data={debugData}
     // collapsible={false}
      translate={this.state.translate}
      scaleExtent={{ min: 1, max: 3 }}
      allowForeignObjects
     // pathFunc="elbow"
      orientation="vertical"
      nodeSvgShape={{ shape: "none" }}
      nodeSize={{ x: 200, y: this.yClearance }}
      onClick={e => this.click(e)}
      onMouseOver={e => this.over(e)}
      styles={{
        links: {
             
              stroke: 'red',
              strokeWidth: "2px",
            },
     }}

推荐阅读