Как выбрать вложенные элементы данных в d3

Question

Я новичок и пытаюсь поиграть с моими данными. Я сначала визуализирую эти круги следующим образом:

circle = svg.selectAll('circle') 
     .data(dataFile) 
     .enter() 
     .append("circle") 
     .attr("stroke", "black") 
     .attr("id", function(d,i){return "id_" + i.toString();}) 
     .attr("class", function(d){return "Color_" + d.Cyl;}) 
     .attr("fill", function(d) {return color(d.Cyl);}) 
     .attr("cx", function(d) { return Scale.xScale(d.Weight); }) 
     .attr("cy", function(d) { return Scale.yScale(d.DealerCost); }) 
     .attr("r", r) 
     .call(drag); 

Затем я использую функцию nest() для группировки своих данных.

var data = d3.nest() 
        .key(function(d) { return d.Cyl;}) 
        .rollup(function(d) { 
        return d3.sum(d, function(g) {return Number(g.value); }); 
    }).entries(csv); 

Наконец я пытаюсь перевести круги, основанные на некоторых логик и это работает отлично.

for(j=0; j<data.length;j++) 
    { 
      svg   
       .selectAll(".Color_" + data[j].key) 
       .transition() 
       .delay(function(d,i) { return 100; }) 
       .duration(1000) 
       .ease("linear") 
       .attr("cx", function(d,i) { return Scale.xScale(data[j].key})  
       .attr("cy", function(d,i) { return height - (i/val);}) 
    } 

Однако некоторые эксперты сказали мне, если я использую Для цикла с d3.selection существует высокая вероятность того, что я делаю что-то неправильно. Поэтому я попытался преобразовать последнюю часть своего кода в код ниже, но он не работает. Есть идеи?

svg 
     .selectAll(function(d){return ".Color_" + d.key;}) 
     .transition() 
     .delay(function(d,i) { return 100; }) 
     .duration(1000) 
     .ease("linear") 
     .attr("cx", function(d,i) { return Scale.xScale(d.key})  
     .attr("cy", function(d,i) { return height - (i/val);}) 
    } 

Answer 1

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

circle 
    .transition() 
    .delay(function(d,i) { return 100; }) 
    .duration(1000) 
    .ease("linear") 
    .attr("cx", function(d,i) { return Scale.xScale(d.key); })  
    .attr("cy", function(d,i) { return height - (i/val); }); 

Там нет необходимости делать второй выбор при использовании его таким образом.