4 ms·

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 varia

by shseham 11y ago

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 http://bl.ocks.org/mbostock/4339184

m4tthumphrey 11y ago
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 http://codepen.io/Pestov/pen/BLpgm
- shseham 11y ago
  It is awesome. Thanks for sharing. Wish I had this a year before. We ended up using this library - https://github.com/cpettitt/dagre https://github.com/cpettitt/dagre
- teleclimber 11y ago
  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.
  - shseham 11y ago
    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 https://github.com/mbostock/d3/issues/1992
such_a_casual 11y ago
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.
kristw 11y ago
This example has text inside the boxes. I use svg's .getBBox() to obtain width/height for each label. http://twitter.github.io/labella.js/with_text.html http://twitter.github.io/labella.js/with_text.html 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.

by shseham 11y ago

m4tthumphrey 11y ago

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 http://codepen.io/Pestov/pen/BLpgm

shseham 11y ago
It is awesome. Thanks for sharing. Wish I had this a year before. We ended up using this library - https://github.com/cpettitt/dagre https://github.com/cpettitt/dagre
teleclimber 11y ago
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.
- shseham 11y ago
  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 https://github.com/mbostock/d3/issues/1992

such_a_casual 11y ago

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.

kristw 11y ago

This example has text inside the boxes. I use svg's .getBBox() to obtain width/height for each label. http://twitter.github.io/labella.js/with_text.html http://twitter.github.io/labella.js/with_text.html 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.