1

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

4

1 回答 1

0

我已经解决了我的问题...

在创建圈子时，我并没有“进入”新圈子以与新绑定的数据相关联。

它只显示绑定时的第一个元素，因为开始时只有一个圆圈。

圆圈的创建现在看起来像这样：

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")
于 2013-08-19T21:05:35.857 回答