Question

When creating circles using D3, is it possible to create a group such that they can be selected at a later stage? For example, if circles are created using the following approach:

var dataset = [   [ 30, 50, 20],
                  [ 100, 50, 20],
                  [ 150, 50, 30]];


//Create SVG element
var svg = d3.select("#chart")
            .append("svg")
            .attr("width",  200)
            .attr("height", 200);

// generate circles 
svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", function(d){
                return d[0];
                })
   .attr("cy", function(d){
                return d[1];
                })
   .attr("r",  function(d){
                return d[2];
                });

Can I tag the circle created from the first array element with circle1 and the second two circles as circle2?

Answer 1

absolutely – update the class attribute dynamically based on the data index:

.attr("class", function(d,i) {return i == 0 ? "circle1" : "circle2";});

then use the assigned classes for selecting elements:

d3.select(".circle1"); //first circle
d3.selectAll(".circle2"); //second and third circles