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

.data（）只绑定第一个元素

1 个答案: