我需要以不同方式定义每个节点之间的链接样式。现在我的树数据定义如下,而链接样式不起作用。有人可以帮忙吗?
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 起作用,因此每个节点都显示定义的颜色,但链接样式不起作用。
最佳答案
嗯,您是否尝试过使用小写字母 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",
},
}}
关于css - 如何在 react-d3-tree 上定义单独的链接样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59957952/