javascript - D3.js 在鼠标悬停在栏上时更改标题文本

Question

我正在使用 D3 显示类似于此处示例的多个条形图(30 多个图表):http://phrogz.net/js/d3-playground/#MultiBars_HTML当用户将鼠标悬停在条形图上时，我只想更改用户正在与之交互的图表的标题，以及有关用户悬停在其上的值的信息。

所以如果我添加如下内容:

bars.on('mouseover', mouseoverfunc);

function mouseoverfunc(d, i) {
// update the title just for this chart..not all charts
a.select("h2").text(function (d) { return "hello"; });
}

所以知道鼠标悬停在 [d3.select(this)] 栏上，我如何选择父级以便我可以只更改一个图表的标题？这里有一个非常相似的例子:http://mbostock.github.com/protovis/ex/minnesota.html我试图在 D3 中复制

谢谢。

Answer 1

最简单的方法可能是为您的标题 div 分配一个属性，让您可以使用 select 语句找到它们，例如:

d3.select("[parentBarChartID="+d.id+"]")

在你的 mouseoverfunc 中。

或者，您可以使 DOM 元素分层，这样您就可以使用 this.parentNode.childNodes 遍历，遍历所有子节点，直到找到标题节点(参见如何遍历子节点 here。