Rectangle between the linking diagonal path using d3

Asked Feb 28 '14 at 09:14

Active Feb 28 '14 at 10:26

Viewed 319 times

i am using d3.js and i have created the tree structure thats working fine for me.But now i am facing problem how to create the rectangle between the diagonal path.i am not getting any idea.`

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
......

/ Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.style("stroke", function(d) { return d.target.level; })
.attr("d", diagonal);

can you please guide me how i can do this.

enter image description here

edited Feb 28 '14 at 10:26

user3106347

asked Feb 28 '14 at 09:14

What do you mean by "the rectangle between the diagonal path"? – Lars Kotthoff Feb 28 '14 at 09:19
means i want rectangle box between the diagonal path – Feb 28 '14 at 10:15
Between the diagonal path and what? – Lars Kotthoff Feb 28 '14 at 10:19
you can refer the attached image.. – Feb 28 '14 at 10:27
Well, you have to calculate the midpoint between source and target for each path and add a `rect` element there. – Lars Kotthoff Feb 28 '14 at 10:29
can you please provide me any example for my reference..if possible – Feb 28 '14 at 10:33
1

[Here](http://stackoverflow.com/questions/10841442/how-to-put-labels-on-the-edges-in-the-dendrogram-example) is a question for how to do it with text. The only difference in your case is that you would add `rect` elements instead. – Lars Kotthoff Feb 28 '14 at 10:35

Rectangle between the linking diagonal path using d3

0 Answers0