3

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
javalearner
  • 347
  • 2
  • 7
  • 21

3 Answers3

3

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.

VividD
  • 10,456
  • 6
  • 64
  • 111
  • It worked ,i got a issue with layout,when i collapse any node it used to transform from the old position.but now it is getting displaced but the old layout with links is not getting vanished as a result two layouts (old one with links alone) are being displaced.please help me with this – javalearner Dec 26 '13 at 13:41
  • I think it is a separate problem, maybe it would be the best for all that you ask a new question, and attach problematic code. – VividD Dec 26 '13 at 14:57
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);
Manoj
  • 1,860
  • 1
  • 13
  • 25
  • Previously all node having child that's why all are dashed..now I have changed code. – Manoj Dec 26 '13 at 15:25
  • Correct, now I see you check (d.source.parent) instead of (d.source.children), and now your code works, I confirm. – VividD Dec 26 '13 at 15:43
  • Thanks Manoj..& VividD.This code worked and solved my additional problem as well discussed above.Thanks again for both of you – javalearner Dec 27 '13 at 05:44
0

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";
  }
})
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • This code won't work. Links do not have children. And nodes do not have stroke-dasharray style. – VividD Dec 26 '13 at 15:00
  • If the poster didn't post any code, it doesn't mean that you can answer with wrong code and mislead the poster. – VividD Dec 31 '13 at 07:01