Получить один элемент из выбора d3js, по индексу

Ответ 1

Самый естественный способ манипулировать только одним элементом - использовать функцию фильтра:

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

Обратите внимание, что в зависимости от того, что вы делаете с другими элементами, вы можете использовать один из двух вариантов этого подхода:

• вариант a): используйте фильтр в функции данных (чтобы уменьшить данные и добавленные элементы)

• вариант b): используйте фильтр для исключения вместо включения, чтобы удалить другие элементы в конце

См. также Отфильтровать данные в d3 для рисования круга или квадрата

Другой способ сделать это - использовать метод selection.each: https://github.com/mbostock/d3/wiki/Selections#wiki-each Используя оператор if с соответствующим индексом, вы можете создать блок для одного элемента. Например.

var data = [[0,0,2],[0,23,5],[2,12,5]];
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);    
            }
          });

Ответ 2

Используйте переменную preset function i, которая ссылается на индекс объекта массива.

var data = [[0,0,2],[0,23,5],[2,12,5]];
circleSet = svg.selectAll()
     .data(data)
     .enter()
     .append('circle')
     .attr('fill',function(d,i){i === 1 ? return 'red' : return 'black' };

Подробнее о ссылках структуры массива в d3.js в этом уроке

Вы также можете кодировать каждый добавляемый элемент, используя при подсчете класса при подсчете класса .

var data = [[0,0,2],[0,23,5],[2,12,5]];
    circleSet = svg.selectAll()
         .data(data)
         .enter()
         .append('circle')
         .attr("class",function(d,i){ return "yourclass item" + i })

var theSecondElement = d3.select(".item1")

Наконец, вы можете использовать метод .each и условное значение для задания определенного элемента

circleSet = svg.selectAll()
         .data(data)
         .enter()
         .append('circle')
         .each(function (d, i) {
            if (i === 1) {
              var that = this;
              (function textAdd() {
                 d3.select(that).append('h1').text(i); 
              )();   
            }
          });