在树布局中为 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();

我使用 css 类 activelink 用于那些具有 "active" : true 和 css 类 link 的链接具有 "active" : false。

Answer 1

根据你的小提琴我创建了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)，以查看链接上的数据）。