如何更新d3.js中的图形图例？

Question

我试图在数据更改时更新我在d3.js中的图例。我的jsfiddle应该更新图例，只要密钥集被更改。只要使用更新日期按钮将不同的数据放入电荷中，密钥集就会更改。

我想是这样的：

var legendBox = legend.selectAll("rect") 
    .data(keys); 

legendBox.enter() 
    .append("rect"); 

legendBox.exit() 
    .remove(); 

legendBox.attr("x", width - 150) 
    .attr("y", function (d, i) { return i * 20;}) 
    .attr("width", 10) 
    .attr("height", 10) 
    .style("fill", function (d, i) { return color(i);}); 

将更新我的传说，并删除旧的标签，每当关键阵列的变化。但它并没有删除旧标签，而只是增加了旧标签的标签。我如何更新我的传奇以反映日期？

Answer 1

的问题是，你正在创建的传说每次一g.legend：

var legend = svg.append("g") 
    .attr("class", "legend") 
    .attr("height", 100) 
    .attr("width", 100) 
    .attr("transform", "translate(-20, 50)"); 

相反，你应该在initPlot一旦创建它，​​然后再用它作为var legend = svg.select('g.legend')为后续的传说rect和text。

Demo。