javascript - 使用 D3 选择圆的子集

Question

使用 D3 创建圈子时，是否可以创建一个组以便以后可以选择它们？例如，如果使用以下方法创建圆圈：

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];
                });

我可以将从第一个数组元素创建的圆标记为circle1，将后两个圆标记为circle2吗？

Answer 1

绝对 - 根据数据索引动态更新类属性：

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

然后使用分配的类来选择元素：

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