0

Please suggest on how to autosize the width of the node according the node value for d3 tree layout.

The following is the link reference I adapted and piece of code.

var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;

http://jsfiddle.net/augburto/YMa2y/

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
Majid
  • 27
  • 7
  • 1
    Not sure what you mean -- do you want to autosize the SVG? – Lars Kotthoff Mar 27 '14 at 11:30
  • Have you tried to play with the `tree.value()` function? – Christopher Chiche Mar 27 '14 at 11:43
  • If you check the above link I have referenced to, and then click on tree --> flare, analytics,and cluster...you will see the node names under cluster have come out of the node and are jumbled. I would want to autosize the node width according to the value that is in it...so that there wil no overlapping – Majid Mar 27 '14 at 11:44
  • @ChristopherChiche...I tried using both value and size, but in vain...$array = '{"name":"'.$name.'","value":'.strlen($name).',"children":[' etc..... – Majid Mar 27 '14 at 11:46

1 Answers1

0

I haven't answered your exact question, but essentially you to need to dynamically auto size the svg rectangle. I've updated your fiddle to dynamically sizing the rectangle based on the number of children, using this code:

> .attr("width", function (d,i) { if(d._children) console.log(rectW +
> d._children.length);
>         return d._children ? (rectW + d._children.length) : rectW; })

Which simply adds the length of the number of children to the rectW. For what you want to do you need to calculate the length of the text and set that to the width of the rectangle. This question might help you calculate the length of the text. You'll also have to recalculate the centre of the rectangle to place the label.

Hope this gets you going.

Cheers

Community
  • 1
  • 1
user1614080
  • 2,854
  • 1
  • 19
  • 22