D3：數據集更新不會從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 ，您會看到它只是一個回車選擇：

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 ，因此我們避免將其作為全局varlines ）：

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() ，否則第一次運行代碼時將不會顯示任何內容。 另外，您也可以復制代碼：

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

編輯：在您的pluker的問題很明顯：當您執行...

.attr("class", "line")

...您正在覆蓋上一課。 因此，應為：

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

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

Answer 2

這是我根據Gerardo的建議以及Mike的教程編寫的新代碼： https : //bl.ocks.org/EmbraceLife/efb531e68ce46c51cb1df2ca360348bb

function update(data) {

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


  // ENTER
  // Create new elements as needed.
  //
  // ENTER + UPDATE
  varlines.enter().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);
                })
                .style('stroke', function(d) {
                    return z(d.name)
                });
    // .merge(varlines); does not help if uncomment and move after .enter()

  // EXIT
  // Remove old elements as needed.
  varlines.exit().remove();
}

然后在初始代碼（queue.await（...））中：

svg.append("g")
   .attr('id', 'lines');
var data = datum.filter(function(d){return (d.group == 
settings['groups_settings']['default_group']) && (d.tp == tp)});
update(data)

和下拉更改事件相同：

var newdata = datum.filter(function(d){return (d.group == g) && (d.tp == tp)});
update(newdata);

行為保持不變-正確顯示第一批，但不會刪除任何更改的行（只是不斷添加行）

在print .selectAll返回以下內容：

Selection {_groups: Array(1), _parents: Array(1), _enter: Array(1), _exit: Array(1)}
_enter:[Array(6)]_exit
:[Array(0)]_groups
:[Array(6)]
_parents:[svg]
__proto__:Object]

這是完整的代碼： https : //gist.github.com/Casyfill/78069927d2b95bf4856aa8048a4fa4be