javascript - D3 : dataset update does not remove elements from DOM

Question

我有一个折线图，默认情况下我只需要显示元素的一个子集，然后在下拉事件中显示不同的子集。

这是初始代码:

 varlines = svg.append("g")
    .attr('id', 'lines')
    .selectAll('g')
    .data(datum.filter(function(d) {
            return d.group == 'default'
        }),
        function(d) {
            return d.name
        }
    ).enter()
    .append("g")
    .attr("class", 'varline')
    .append("path")
    .attr("class", "line")
    .attr("id", function(d) {
        return 'line_' + d.name
    })
    .attr("d", function(d) {
        return line(d.datum);
    });

而且效果很好。现在，这是更新我的选择的代码:

$('.dropdown-menu a').click(function(d) {
    var g = this.text;
    dd.select("button").text(g) // switch header

    var newdata = datum.filter(function(d) {
        return d.group == g
    }); # datalines for selected group

    varlines.data(newdata, function(d) { return d.name })
        .enter()
        .merge(varlines)
        .append("g")
        .attr("class", 'varline')
        .attr("id", function(d) {
            return 'line_' + d.name
        })
        .append("path")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(d.datum);
        });

    varlines.exit().remove()

而且效果很奇怪。虽然它添加了东西并且不复制 dom 元素，但它不会删除旧元素。

此外，当我 console.log(varlines); 在任何一步时，它只显示 _groups 数组中的两个初始元素，而没有 _enter 和 _exit 属性，甚至在 svg 中有 3 行。

我正在使用 d3v4，jquery3.1.1.slim

Answer 1

如果您查看 varlines，您会发现它只是一个enter 选择:

varlines = svg.append("g")
    .attr('id', 'lines')
    .selectAll('g')
    .data(datum.filter(function(d) {
            return d.group == 'default'
        }),
        function(d) {
            return d.name
        }
    ).enter()
    .append("g")
    //etc...

当然，您不能在输入选择时调用 exit()。因此，这:

varlines.exit().remove()

...没用。

解决方案:通过破坏 varlines 使其成为“更新”选择(我在这里使用 var，所以我们避免它成为一个全局):

var varlines = svg.append("g")
    .attr('id', 'lines')
    .selectAll('g')
    .data(datum.filter(function(d) {
            return d.group == 'default'
        }),
        function(d) {
            return d.name
        }
    );

varlines.enter()
    .append("g")
    //etc...

注意这个事实:因为您使用的是 D3 v4，所以您必须使用 merge()，否则代码第一次运行时将显示nothing .或者，您可以只复制您的代码:

varlines = svg.append("g")
    .attr('id', 'lines')
    .selectAll('g')
    .data(datum.filter(function(d) {
            return d.group == 'default'
        }),
        function(d) {
            return d.name
        }
    )

varlines.enter()
    .append("g")
    //all the attributes here

varlines.//all the attributes here again

编辑:你的 plunker 中的问题很明显:当你这样做时......

.attr("class", "line")

...你正在覆盖之前的类(class)。因此，应该是:

.attr("class", "varline line")

这是更新的插件:https://plnkr.co/edit/43suZoDC37TOEfCBJOdT?p=preview