Graphics Reference
In-Depth Information
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var myData = [20,50,75,40];
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
svg.selectAll("circle")
.data(myData)
.enter().append("circle")
.attr("cx", function(d,i) { return (i*100+100); })
.attr("cy", 100)
.attr("r", function(d) { return d; })
.attr("fill", "orange")
.attr("stroke", "blue");
</script>
</body>
In this example, the data is defined near the top as a JavaScript list (
var
myData = [20,50,75,40];
), and then each circle can be created in D3
based on the data. There is a bit more to the method chain to set up the
geometry based on data:
•
svg
—Start with the
svg
object.
•
.selectAll("circle")
—Select all objects contained in the
svg
object of type
circle
. No
circle
objects have been created yet, so
this is just a placeholder for objects that are about to be created.
•
.data(myData)
—This identifies which data will be connected to the
graphical objects (that is, the list of four values).
•
.enter().append("circle")
—The
enter
portion now sets up the
selection specifically for those objects that do not yet exist (that is, the
new objects that are
entering
the scene). For each of those items, a
graphical
circle
object is appended.
