javascript - 是否可以仅在 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

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