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

Question

Я создал набор d3js элементов на основе массива 3-х элементов:

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

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

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

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

Смотрите также Filter data in d3 to draw either circle or square

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

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

Answer 2

Используйте заданную функцию 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 at this tutorial

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

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