[英]Using different classes for different links in d3 js in tree layout
I am using d3 collapsible layout to make a collapsible tree. 我正在使用d3可折叠布局来制作可折叠的树。 I want the links in the tree to have different colors according to json data. 我希望树中的链接根据json数据有不同的颜色。
The json data is 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}
]
}
]
}}
I want the link to have activebranch
css class if the active
property of target node is true, otherwise it should have link
css class. 如果目标节点的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;
}
I am using following code to do this, but it dosen't work. 我使用以下代码来执行此操作,但它不起作用。
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();
I am using css class activelink
for those links which have "active" : true
and css class link
which have "active" : false
. 我正在使用css类activelink
用于那些具有"active" : true
链接"active" : true
和css类link
,它们具有"active" : false
。
Based on your fiddle I created this . 基于你的小提琴我创造了这个 。
To make it work, I first changed the raw json link, and then I added a sample additional class: 为了使它工作,我首先更改了原始json链接,然后我添加了一个示例附加类:
.link2 {
stroke: red;
}
So when I add a link (on enter
), I simply: 所以当我添加链接(在enter
)时,我只是:
link.enter().insert("path", "g")
.attr("class", function (d) {
var myClass = (d.target.name.length > 7 ? "" : " link2");
return "link" + myClass;
})
...etc
so I make sure the base class link
is still there, and if a certain criteria is met (in our case here: if the name of the target node is > 7 in length) I add a class (or not). 所以我确保基类link
仍然存在,如果满足某个条件(在我们的例子中:如果目标节点的名称长度> 7)我添加一个类(或不)。 So in our case, we now have certain red links, based on the data in the JSON. 所以在我们的例子中,我们现在根据JSON中的数据有一些红色链接。
I hope this gets you started with your own data! 我希望这可以帮助您开始使用自己的数据!
(add a console.log(d)
in the function pasted above, to see the data that you have on the link). (在上面粘贴的函数中添加console.log(d)
,以查看链接上的数据)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.