Question

我带着D3.js的多线图表。

初始渲染效果很好。当我尝试更新时，只添加新行而不是更新/删除旧行。

这是渲染线的部分：

var node = svg.selectAll(".g.city")
    .data(data, function(d) { return d.name; });

var enter = node.enter().append("g")
    .attr("class", "city");

enter.append("path")
    .attr("class", "line")
    .attr("d", function(d) {
        return line(d.data);
    })
    .style("stroke", function(d) {
        return color(d.name);
    });
// Text element left out

var remove = node.exit().remove();

如何更新旧值（指定键功能）或完全删除它们？

Answer 1

你的第一个选择是错误的。选择器.g.city选择包含类 g和city的所有元素。但是，您的选择有效，但始终会返回一个空选择，将所有数据放入输入选择中，并将退出选择留空。相反，您对具有类g的组元素city感兴趣。从选择器中删除第一个点应该可以解决问题：

var node = svg.selectAll("g.city")   // <-- remove the dot
    .data(data, function(d) { return d.name; });

D3.js exit（）。remove（）不会删除数据/行

1 个答案: