。数据（）结合

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")