问题描述
我正在使用来制作可折叠的树。 我希望树中的链接根据json数据有不同的颜色。
json数据是
{"root":{
"name": "A",
"branchid" : 2,
"active" : true,
"activecount" : 3,
"children": [
{
"name": "Data1",
"branchid" : 2,
"active" : false,
"activecount" : 3,
"children": [
{
"name": "C",
"branchid" : 2,
"active" : true,
"activecount" : 3,
"children": [
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3}
]
},
{
"name": "C",
"branchid" : 2,
"active" : true,
"activecount" : 3,
"children": [
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3}
]
},
{
"name": "C",
"branchid" : 2,
"active" : false,
"activecount" : 3,
"children": [
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3}
]
}
]
},
{
"name": "Data2",
"branchid" : 2,
"active" : true,
"activecount" : 3,
"children": [
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{
"name": "C",
"branchid" : 2,
"active" : false,
"activecount" : 3,
"children": [
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "D","branchid" : 2, "active" : true,"activecount" : 3}
]
},
{"name": "C","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "C","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "C","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "C","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "C","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "C","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "C","branchid" : 2, "active" : true,"activecount" : 3},
{"name": "C","branchid" : 2, "active" : false,"activecount" : 3},
{"name": "C","branchid" : 2, "active" : true,"activecount" : 3}
]
}
]
}}
如果目标节点的active属性为true，我希望链接具有activebranch css类，否则它应该具有link css类。
.activebranch{
fill: none;
stroke: #000;
stroke-width: 3.5px;
cursor: pointer;
}
.link{
fill: none;
stroke: #bbb;
stroke-width: 3.5px;
cursor: pointer;
}
我使用以下代码来执行此操作，但它不起作用。
var link = svg.selectAll("path.link")
.data(links, function(d) {
if(d.target.active == "false")
return d.target.id;
});
var activelink = svg.selectAll("path.activebranch")
.data(links, function(d){
if(d.target.active == "true")
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.on("click", TimeLine);
activelink.enter().insert("path", "g")
.attr("class", "activebranch")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.on("click", TimeLine);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
activelink.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
activelink.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
我正在使用css类activelink用于那些具有"active" : true链接"active" : true和css类link ，它们具有"active" : false 。
1楼
基于你的小提琴我创造了 。
为了使它工作，我首先更改了原始json链接，然后我添加了一个示例附加类：
.link2 {
stroke: red;
}
所以当我添加链接（在enter ）时，我只是：
link.enter().insert("path", "g")
.attr("class", function (d) {
var myClass = (d.target.name.length > 7 ? "" : " link2");
return "link" + myClass;
})
...etc
所以我确保基类link仍然存在，如果满足某个条件（在我们的例子中：如果目标节点的名称长度> 7）我添加一个类（或不）。
所以在我们的例子中，我们现在根据JSON中的数据有一些红色链接。
我希望这可以帮助您开始使用自己的数据！
（在上面粘贴的函数中添加console.log(d) ，以查看链接上的数据）。