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

2023-11-30

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

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

有可能的。看看这个直播example。截图在这里:

enter image description here

我创建了两种样式,一种用于连续,另一种用于虚线链接:

.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 路径样式

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐