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

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

1 个答案: