javascript - 在树布局中对 d3 js 中的不同链接使用不同的类

Question

我正在使用 d3 collapsible layout 制作一棵可折叠的树。我希望树中的链接根据 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 属性为真，我希望链接具有 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();

我正在为那些具有 "active": true 的链接使用 css class activelink 和具有 "的 css class link活跃”:假。

Answer 1

基于你的 fiddle ，我创建了 this .

为了让它工作，我首先更改了原始 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)，以查看链接上的数据)。