Graphics Reference
In-Depth Information
.attr("cx", function(d,i) { return scale * (i /
num) + pad; })
.attr("cy", function(d,i) { return scale * (i %
num) + pad; });
In this case, there is a bit more to the method chain to set up the nodes:
•
svg
—Start with the
svg
object.
•
.selectAll(".node")
—Select all objects contained in the
svg
object of class
node
, which are about to be created.
•
.data(graph.nodes)
—Identify the data (that is, the list of
nodes
in
the
graph
object) to connect to the graphical objects.
•
.enter().append("circle")
—Create a graphical circle per each
node in the list.
•
.attr("r",15)
—Set attribute
r
(that is, the radius) to 15 pixels.
•
.attr("cx", function(d,i) {return scale * (i / num) +
pad; })
—Set circle
x
position to a
function
. The
function
returns
a value based on the iterator
i
divided by number of items per line
(
num
), scaled by the
scale
factor, and moved over by
pad
to adjust for
padding.
• .attr(
"cy", function(d,i) {return scale * (i % num) +
pad; })
—The
function
for the
y
position is similar, using a modulus
(
%
) operator to wrap the
y
value after each column is completed.
Similar to the previous example, at this point, a set of circles has been
created. The next portion generates all the lines corresponding to links. This
code is very similar to the circle code, except that SVG
line
objects have
different attributes—
x1
and
y1
refer to the starting x and y coordinates of
the line, and
x2
and
y2
refer to the ending x and y coordinates of the line.
// draw the links
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("stroke","blue")
.attr("x1", function(d,i) { return scale *
