is it possible to draw dashed links only for child to child nodes of tree layout in d3 js

问题

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

回答1:

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.

回答2:

Yes, It is possible to draw dashed links only for child to subchilds using 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); 

回答3:

Yes, this is possible. You haven't specified how your links are specified, but the code would be something like this.

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

来源：https://stackoverflow.com/questions/20783718/is-it-possible-to-draw-dashed-links-only-for-child-to-child-nodes-of-tree-layout