Demo: http://bl.ocks.org/1691430/
Generates an automatic and dynamic positioning for labels, using the d3 force layout. Once aforce_labels
object has been created, simply call the bound function update
with a selection of the objects you want to attach labels to as an argument. The force_labels object is a d3.force object which allows full control over the charge, gravity, theta etc.
At each tick the following occurs:
anchorPos
under x,ylabelPos
under x,yBoth the anchorPos
and labelPos
are inserted in the __data__
variable of the object being labeled. This allows easy access when drawing the labels and connectors.
In the demo the label and link are created as svg objects on the same data selection as the anchors. As the position information is embedded in __data__
the redraw function is simply:
function redrawLabels() {
labelBox
.attr("transform",function(d) { return "translate("+d.labelPos.x+" "+d.labelPos.y+")"});
links
.attr("x1",function(d) { return d.anchorPos.x})
.attr("y1",function(d) { return d.anchorPos.y})
.attr("x2",function(d) { return d.labelPos.x})
.attr("y2",function(d) { return d.labelPos.y});
}
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.