Graphics Reference
In-Depth Information
•
.attr("cx", function(d,i)
—Instead of a single value, a
function
is used. The
function
has two parameters available for
working with data.
d
references the data for this specific node, so, for
example,
d
for the first item is
20
.
i
is an iterator, which starts at 0 and
increases by 1 for each successive data item.
•
return (i*100+100);
—The
function
returns a value based on the
iterator
i
, which is multiplied by 100 (so the circles are spaced out by
100 pixels each) and 100 is added as a padding so that the first circle
isn't cut off.
•
.attr
(
"cy", 100)
—This simply sets the
y
value to a constant of
100
.
• .attr(
"r", function(d) { return d; })
—The radius is based on
a
function
of the data value (that is, the data from the array is directly
mapped to the size of the circle).
• .attr("fill", "orange"), .attr("stroke", "blue");—Set the fill and outline
color of the circles.
Figure 8-6
shows the result of this code.
