爲什麼我的d3工具提示沒有正確更新？

Question

我使用的是jsfiddle。當我將鼠標懸停在條上時，所有的提示最初都是正確的。但是當我單擊周視圖按鈕來更改圖形時，工具提示不會更新。

我相信這個問題是在本節：

layer.enter() 
    .append("g") 
    .attr("class", "layer"); 

layer.attr("fill", function (d, i) { 
    return color(i); 
    }) 
.append("svg:title") 
.text(function(d){ 
    return d[0].s; 
}); 

layer.exit() 
    .remove(); 

附加文字是我添加工具提示。我認爲進入和退出會刷新欄，因此刷新工具提示，但它沒有正確執行。

如何在圖形更改時更新工具提示？

Answer 1

這是因爲每次更改條形圖時都會添加一個新的<title>元素。追加應該在輸入選擇上完成一次，然後在更新選擇中簡單更新標題的值。

這是你的代碼的修改版本的一些評論在線（我已刪除了不相關的刀尖部分）：

layer.enter() 
    .append("g") 
    .attr("class", "layer") 
     .append("title"); // add new element under new layer 

// add or update the value of the title element 
layer.select("title").text(function(d) { 
    return d[0].s; 
});