是否可以仅为d3 js中的树布局的子节点绘制虚线链接

Question

是否可以仅为子节点绘制虚线链接。子节点的父节点应该是常规连续链接

    a   b
    !     !  ->dashed links
    !     !
     c    d
      |  | ->continues links
       a

Answer 1

有可能。看看这个直播example。屏幕截图在这里：

我创建了两个样式，一个用于连续，另一个用于虚线：

.link_continuous {
    fill: none;
    stroke: #ff0000;
    stroke-width: 1.5px;
}
.link_dashed {
    fill: none;
    stroke: #ff0000;
    stroke-width: 1.5px;
    stroke-dasharray: 20,10,5,5,5,10;
}

JavaScript中的这一行决定应该应用哪种样式：

.attr("class", function (d) { return (d.source != root) ? "link_dashed" : "link_continuous" ; })

我选择了一点点奢侈的破折号风格，但你当然可以改变它。在CSS文件中执行此操作的好处在于您可以更轻松地进行实验。

此外，此页面适用于学习样式化SVG路径：

SVG Path Styling

以类似的方式，您也可以更改节点样式。希望这会有所帮助。

Answer 2

是的，可以使用D3.js

仅为子项到子项绘制虚线链接

DEMO

<强> D3.js ：

var cluster = d3.layout.tree();
     cluster.size([width,height]);
      var nodes = cluster.nodes(json);
     var link = svg.selectAll("g.node")
       .data(cluster.links(nodes))     
       .enter().append("g")
       .append("path")
          .attr("class", "link")
          .attr("stroke-dasharray", function(d) { 
              return (d.source.parent) ? "6,6" : "1,0"; }) //for dashed line
          .attr("d", elbow); 

Answer 3

是的，这是可能的。您还没有指定如何指定链接，但代码将是这样的。

.style("stroke-dasharray", function(d) {
  if(d.children == null) {
    return "1,0";
  } else {
    return "1,1";
  }
})