D3 добавить различные элементы, сохранить общий индекс

Question

Мое приложение должно добавлять в SVG различные элементы в зависимости от типа данных. Мой код более или менее выглядит так:

var elements = svg.selectAll(".elements") 
    .data(someData) 
    .enter().append("g"); 

var circles = elements.filter(function (d,i) { 
    return d.type == "category1" 
}) 
    .append("circle") 


var rectangles = smallCircles.filter(function (d,i) { 
      return d.type == "category2" 
     }) 
      .append("rect") 

Таким образом, если data.type = «catgory1», программа должна добавить круг, если оно равно «category2», он должен приложить прямоугольник. Проблема, с которой я сталкиваюсь, заключается в том, что я устанавливаю свою позицию в SVG на основе их индивидуальных индексов («i» в функции (d, i)). Однако для этого мне нужно, чтобы последовательность индексов была последовательной между этими двумя типами элементов. Есть ли лучший способ сделать это, чем просто использовать внешнюю переменную, которая будет ++ каждый раз, когда добавляется новый элемент?

Answer 1

Пара способов, которыми вы могли бы это сделать.

Во-первых, Вы можете использовать .each и инкапсулирует логику добавляемую:

var elements = svg.selectAll(".elements") 
    .data([ 
    { 
     type: "category1" 
    },{ 
     type: "category2" 
    } 
    ]) 
    .enter().append("g"); 

elements.each(function(d,i){ 

    // i is index on everything 

    var self = d3.select(this); 
    switch(d.type) { 
     case "category1": 
      self.append("circle"); 
      break; 
     case "category2": 
      self.append("rect"); 
      break; 
     default: 
      break; 
    } 
}); 

Или, второй, лучший способ сделать это было бы, чтобы ваши элементы часть ваших данных:

var data = [ 
    { 
     type: "category1" 
    },{ 
     type: "category2" 
    } 
    ]; 

data.forEach(function(d){ 
    switch(d.type) { 
     case "category1": 
      d.elem = "circle" 
      break; 
     case "category2": 
      d.elem = "rect" 
      break; 
     default: 
      break; 
    } 
}); 

var svg = d3.select('body').append('svg'); 

var elements = svg.selectAll(".elements") 
    .data(data) 
    .enter().append("g"); 

elements.append(function(d){ 
    return document.createElement(d.elem); 
});