.data() привязка только первого элемента

Question

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

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

ПРОБЛЕМА: Создается и перемещается только первый элемент согласно связанным данным.

Во-первых, я собираю координаты:

xyCoords = getPathogen_xyCoords(newInfections); 

Где xyCoords выглядит следующим образом:

{receiverX: newInfections[i].x, receiverY: newInfections[i].y, transmitterX: newInfections[i].infectedBy.x, transmitterY: newInfections[i].infectedBy.y} 

Затем я создаю круги и привязать их к xyCoords:

d3.select(".svg").append("circle") 
    .attr("class", "pathogen") 


d3.selectAll(".pathogen") 
    .data(xyCoords) 
    .attr("cx", function(d) { return d.transmitterX}) 
    .attr("cy", function(d) { return d.transmitterY}) 
    .attr("r", 4) 
    .style("fill", "green") 

Наконец, круг перемещается с переходом:

d3.selectAll(".pathogen") 
     .transition() 
     .duration(500) 
     .attr("cx", function(d) { return d.receiverX}) 
     .attr("cy", function(d) { return d.receiverY}); 

РЕДАКТОРА: Игра была в течение нескольких месяцев и довольно хорошо! Проверьте это на http://vax.herokuapp.com!

Answer 1

Я решить мою проблему ...

При создании кружков, я не «ввод» новые круги, которые будут связаны с недавно связанными данными.

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

Создание кругов теперь выглядит следующим образом:

xyCoords = getPathogen_xyCoords(newInfections); 

var pathogen = svg.selectAll(".pathogen") 
    .data(xyCoords) 
    .enter() 
    .append("circle") 
    .attr("class", "pathogen") 
    .attr("cx", function(d) { return d.transmitterX }) 
    .attr("cy", function(d) { return d.transmitterY }) 
    .attr("r", 4) 
    .style("fill", "green")