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這裏，所以我們避免它是一個全球性）：

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()，否則沒有任何會在代碼首次運行時顯示。 Alternativelly，你可以複製你的代碼：

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

...要覆蓋前一次的等級。因此，它應該是：

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

這裏是更新plunker：https://plnkr.co/edit/43suZoDC37TOEfCBJOdT?p=preview

Answer 2

這是繼赫拉爾多的建議以及本邁克的教程我的新代碼：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); 

行爲仍然是相同的 - 正確地顯示第一批，但任何更改（只是不斷增加線）

不會刪除線在打印

.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