我的標籤更新選擇有什麼問題

Question

我有一個條形圖，通過點擊相關表格的行來進行更新。除了標籤以外，一切工作都很完美。這是下面的代碼：

var mytext = svg.selectAll(".text").data(filterdata,function(d) { return d.date; }) 
    mytext.enter().append("text") 
    mytext.exit().remove() 
    mytext 
    .attr("class","label") 
    .attr("x", (function(d) { return x(d.date) } )) 
    .attr("y", function(d) { return y(d.articles) + 1; }) 
    .attr("dy", ".75em") 
    .text(function(d) { return d.articles; }) 
    .style("text-anchor", "start") 
    } 

的輸入選擇做工精細但舊的不消失（每次點擊一個新行，新的標籤彈出時）。我的數據集看起來是這樣的：

[{articles: 1 
date:Tue Apr 26 2016 00:00:00 GMT-0500 (CDT) 
key:"2016-04-26T05:00:00.000Z" 
values:1}, 
{articles:1 
date:Thu Apr 28 2016 00:00:00 GMT-0500 (CDT) 
key:"2016-04-28T05:00:00.000Z" 
values:1}, 
{articles:2 
date:Sun May 08 2016 00:00:00 GMT-0500 (CDT) 
key:"2016-05-08T05:00:00.000Z" 
values:2}, 
{etc...}] 

Answer 1

好的，我找到解決方案用下面的代碼

var mytext = svg.selectAll("text.label").data(filterdata,function(d) { return d.date; }) 
    mytext.exit().remove() 
    mytext.enter().append("text") 
    mytext 
    .attr("class","label") 
    .attr("x", (function(d) { return x(d.date) } )) 
    .attr("y", function(d) { return y(d.articles) + 1; }) 
    .attr("dy", ".75em") 
    .text(function(d) { return d.articles; }) 
    .style("text-anchor", "start") 
    } 

我改變svg.selectAll("text")爲svg.selectAll("text.label")。我想有一些與attr("class","label")和append("text")有關的東西。但我不完全瞭解它，如果有人可以解釋我這:)謝謝

Answer 2

您可以將出口指令：

mytext.exit().remove(); 

您輸入的指令之前

mytext.enter().append("text") 

像這樣的事情

var mytext = svg.selectAll(".text").data(filterdata,function(d) { return d.date; }) 
    mytext.exit().remove(); 
    mytext.enter().append("text"); 
    mytext 
    .attr("class","label") 
    .attr("x", (function(d) { return x(d.date) } )) 
    .attr("y", function(d) { return y(d.articles) + 1; }) 
    .attr("dy", ".75em") 
    .text(function(d) { return d.articles; }) 
    .style("text-anchor", "start") 
    }