d3.js - .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でチェックしてください。