可以在d3 js中仅为树布局的子节点绘制虚链接 [英] is it possible to draw dashed links only for child to child nodes of tree layout in d3 js

问题描述

是可以绘制虚线链接，只有孩子到subchilds.Parent节点到其孩子应该是常规的连续链接

  ab 
！ ！ - >虚线链接
！ ！ 
 c d 
 | | - >继续链接
a 
  

解决方案

可能。请查看此实时

以类似的方式，你也可以改变节点样式。希望这有帮助。

is it possible to draw dashed links only for child to subchilds.Parent node to its child should be regular continuous links

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

解决方案

It is possible. Take a look at this live example. Screenshot is here:

I created two styles, one for continuous, and another for dashed link:

.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;
}

This line in JavaScript makes a decision what style should be applied:

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

I chose a little bit extravagant dash style, but you can change that of course. The beauty of doing this in CSS file is that you can easier experiment.

Also, this page is good for learning styling SVG paths:

SVG Path Styling

In similar way you can change node styles too. Hope this helps.

这篇关于可以在d3 js中仅为树布局的子节点绘制虚链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！