Accepted answer

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

enter image description 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.


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";


Yes, It is possible to draw dashed links only for child to subchilds using D3.js



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

Related Query

More Query from same tag