Question

我可以完美地加载和显示数据一次，但任何更新尝试似乎都失败了。

我正在尝试构建一个显示活动的地图。在我的数据csv中，我有纬度和经度以及活动时间（0-23）。我使用this highly useful tutorial使用新数据更新D3。我的想法是按小时循环数据。

我或多或少地窃取了更新功能。虽然初始调用工作正常，但任何重复调用都只能重新着色已存在的数据，而不是删除它并添加新数据。这让我相信我没有改变传入的数据。

我的更新通话有什么明显错误吗？

function update(data, x) {
    // DATA JOIN
    // Join new data to any existing data
    var circles = g.selectAll("circle")
        .data(data); //, function(d) { return d; });

    // UPDATE
    // Update old elements as needed.
    circles
        .style("fill", "green")
            .transition()
            .duration(750);

    // ENTER
    // Create new elements
    circles.enter().append("circle")
        .filter(function(d) { return d.hr == x; })
        .attr("cx", function(d) {
            return projection([d.lon, d.lat])[0];
        })
        .attr("cy", function(d) {
            return projection([d.lon, d.lat])[1];
        })
        .attr("r", 0)
        .style("opacity", 0.2)
        .style("fill", "blue")
        .transition()
        .duration(750)
        .ease("linear")
        .attr("r", function(d) {
            return d.radius/2;
        });


    // EXIT
    // Remove old elements
    circles.exit()
        .style("fill", "red")
        .transition()
        .duration(1500)
        .ease("linear")
        .attr("r", 0)
        .remove();
}

从命令行运行：

update(csv_data, 1)
update(csv_data, 5)

Answer 1

您似乎正在尝试按行更改数据

filter(function(d) { return d.hr == x; })

但那只是filtering the selection。

您要做的是在将数据传递给您选择的行

之前过滤数据
.data(data);

我建议您在更新功能的开头使用Array.filter：

function update(data, x) { // DATA JOIN // Join new data to any existing data // filter the data as per x data = data.filter(function (d) { return d.hr == x; }); var circles = g.selectAll("circle") .data(data); // rest of function }

请务必删除追加后过滤的行。

未能在D3中关闭新数据

1 个答案: