Graphics Reference
In-Depth Information
d.target.y
,
d.x
). When the data is connected to the force system, D3
adds an
x
and
y
attribute to the source, target, and node to keep track of the
positions.
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y;
});
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
At this point, the springy graph is ready to run.
Click-and-Drag Nodes
D3's springy layout also provides a nice interaction: the capability to drag
nodes while the layout is updating. When the nodes are created, a
call
method is added that refers to the
force.drag
function. This built-in
function automatically responds to
drag
events on the target object,
changing the object's
x
and
y
position to the new mouse position.
.call(force.drag);
When dragging any node, all the other nodes update as well, with the entire
graph appearing to be bouncy, hence the reference to a springy graph. The
resulting graph shown in
Figure 8-13
now has clusters much more obvious
than in the circular layout or the grid layout.
Labels
It is nice to add labels to a graph. You can use the SVG
text
element to
add labels. The
text
element has many attributes, including font family,
alignment,
font-size
,
x, y
, and also a
dx, dy
for nudging text. (In the
following example, the label is nudged down a half a character.) Because
