d3.js: добавить элементы в соответствии с значением атрибута данных

Question

Я упростил пример как можно больше. У меня есть файл data.csv и вы хотите создать элементы, как показано ниже (Результат). Есть ли какой-то изящный способ? Спасибо.

данных (data.csv):

id, name, value 
1, fruits, apple 
2, fruits, pear 
3, fruits, strawberry 
4, vegetables, carrot 
5, vegetables, celery 
... 

Результат:

    <g class="groups" id="fruits"> 
     <circle class="some" id="apple"/> 
     <circle class="some" id="pear"/> 
     <circle class="some" id="strawberry"/> 
     ... 
    </g> 
    <g class="groups" id="vegetables"> 
     <circle class="some" id="carrot"> 
     <circle class="some" id="celery"> 
     ... 
    </g> 

Я пытался что-то вроде этого:

    d3.csv("data.csv", function(data) { 
    var svg = ... 
    var groups = svg.selectAll(".groups") 
        .data(data) 
        .enter().append("g") 
        .attr("class", "groups") 
        .attr("id", function(d) { return d.name; }); 

     groups.selectAll(".some") 
     .data(data, function(d) { return d.id; }) 
     .enter().append("circle") 
     .attr("class", "some") 
     .attr("id", function(d) { return d.value; }); 
    }); 

Но он выбирает все строки. Я не знаю, как выбирать и вводить только строки с тем же именем, что и родительский элемент g.

Answer 1

Вы хотите использовать nest operator для этого:

var byName = d3.nest().key(function(d) { return d.name; }) 
         .entries(data); 
var groups = svg.selectAll(".groups").data(byName) 
       .enter().append("g") 
       .attr("class", "groups") 
       .attr("id", function(d) { return d.key; }); 
var circles = groups.selectAll(".some") 
        .data(function(d) { return d.values; }) 
        .enter().append("circle") 
        .attr("class", "some") 
        .attr("id", function(d) { return d.value; });