kristw
Joined 13 years ago
Karma
18
Submissions
17
Member since
Dec 4
Visualize data at @twitter during the day. Battle with open data and code random stuffs at night.
View on Hacker NewsRecent submissions
Comment · 11 years 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
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.
Comment · 11 years ago
That was to showcase that you can render it in any orientation.
This example might be a more likely use case for left/right (all labels usually have same height)
Comment · 11 years ago
Comment · 11 years ago
Comment · 11 years ago
This is not reingold-tilford. The algorithm has two parts. The first part is a heuristic to distribute nodes into multiple layers when it won't fit in one. Then for each layer, it is a physics simulation with the labels. Each label has attraction force to the desired position, but they also push each other.
Comment · 11 years ago
fixed.
Comment · 11 years ago
The intention of this work was to find ways to put labels on any axis (1D). So if you want to use this to label peaks of area chart you can run labella to get the x position and then figure out y position by yourself.
But it won't support placing label on a zigzag path.
Comment · 11 years ago
That's how I felt with the 90 degrees bends.
However, you have the choice to draw it your own way. https://github.com/twitter/labella.js/blob/master/docs/Rende...
renderer.getWaypoints(node) will give you the positions on the route and you can draw the connector as you like.