Input Data is specified as an array of arbitrary values, such as:
The data format and their related processing is agnostic.1) :
The data operator binds input data to selected nodes. Once bound to nodes, it is available on subsequent re-selection without again requiring the data operator. Bounded Data can be used to reorder (sort) or cull elements (filter).
// Add a svg element
var width = 400, height = 70;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// The data set
var dataset = [1,2,3,4];
// Add the circles to the svg
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
// d is the data given by callback
// and i is the data position in the array
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", height/2)
.attr("r", function(d) {
return d*2;
});