.data() 仅绑定第一个元素答案

【问题标题】：.data() binding only first element.data() 仅绑定第一个元素
【发布时间】：2013-08-19 20:42:55
【问题描述】：

我正在使用 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！

【问题讨论】：

标签： d3.js force-layout

【解决方案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")

【讨论】：