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}
   ]
  }
 ]
}}

如果目标节点的activebranch属性为true，我希望链接有active 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)，以查看链接上的数据。）

在树形布局中的d3 js中为不同的链接使用不同的类

1 个答案: