d3.js - 通过索引从d3js选择中获取一个元素

Question

我基于3个元素的数组创建了一组d3js元素:

var data = [[0,0,2],[0,23,5],[2,12,5]];
circleSet = svg.selectAll()
             .data(data)
             .enter().append('circle');

编辑:

如何按索引选择第二个元素？

Answer 1

仅处理一个元素的最自然的方法是使用过滤器功能:

var data = [[0,0,2],[0,23,5],[2,12,5]];
var circleSet = svg.selectAll()
         .data(data)
         .enter()
         .append('circle');
var filteredCircleSet = circleSet
         .filter(function (d, i) { return i === 1;})
         // put all your operations on the second element, e.g.
         .append('h1').text('foo');    

请注意，根据您对其他元素的处理方式，可以使用此方法的两个变体之一:

变体a):在数据函数中使用过滤器(以减少数据和附加元素)

变体b):使用过滤器排除而不是包括，以便删除

末尾的其他元素

另请参阅 Filter data in d3 to draw either circle or square

另一种方法是使用selection.each方法: https://github.com/mbostock/d3/wiki/Selections#wiki-each
通过使用带有相应索引的if语句，可以为一个元素创建一个块。
例如。

var data = [[0,0,2],[0,23,5],[2,12,5]];
var circleSet = svg.selectAll()
         .data(data)
         .enter()
         .append('circle')
         .each(function (d, i) {
            if (i === 1) {
              // put all your operations on the second element, e.g.
              d3.select(this).append('h1').text(i);    
            }
          });