javascript - 为什么 d3 中的工具提示无法正确更新？

Question

我正在使用这个jsfiddle 。当我将鼠标悬停在栏上时，所有工具提示最初都是正确的。但是，当我单击周 View 按钮更改图表时，工具提示不会更新。

我认为问题出在这一部分:

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;
});