Hacker News new | comments | ask | show | jobs | submit login

How complex would it be to do it without taking in the min/max width parameters? It soon becomes insanely complex when you want draw a graph with nodes of variable width and height. Say for example if you wanted to add text inside the boxes and you want the box width to be determined based on the text. I have previously tried to adapt the default tree layout algorithm (Reingold–Tilford?!) in D3 and failed miserably. http://bl.ocks.org/mbostock/4339184

Ditto. I don't think d3 is best suited for tree diagrams with dynamic values and data. I ended up stumbling across an awesome example on codepen explaining how todo it with just CSS, I modified it slightly and it's now used in one of our production projects.

Here it is: http://codepen.io/Pestov/pen/BLpgm

Why do you think D3 is not well suited to this task? Given all the amazing layouts it can manage very well this is surprising.

Naturally you wouldn't be able to use their default tree layout because it assumes identically sized nodes but creating your own layout should be doable. If I remember correctly D3's tree layout code is 200LOC.

I am heading down this path now so I'm sorry to see both you and poster above giving up on D3 for this.

I am not giving up on D3. I just wanted to point out the limitation in the default tree layout and the complexity around it. In fact there was a discussion about variable sized nodes in GH and a plugin is in place now. Might be useful for you if you are heading down the same path - https://github.com/mbostock/d3/issues/1992

It is awesome. Thanks for sharing. Wish I had this a year before. We ended up using this library - https://github.com/cpettitt/dagre

This example has text inside the boxes. I use svg's .getBBox() to obtain width/height for each label.


The max width parameter is optional. I am not sure what are you trying to do with the graphs though. This library is not for graphs or trees. It's for points on single axis.

One way to add more text is to use the labels as buttons/links. Have a text box adjacent (above, below, to the side). Have the text in the text box change based on which label you click.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact