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

D3.js change title text when mouseover a bar

本文关键字：标题 文本 js 鼠标 悬停 D3      更新时间：2023-09-26

我正在使用 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）]，我如何选择父级以便我可以只更改一个图表的标题？ 这里有一个非常相似的例子：我试图在 D3 中复制 http://mbostock.github.com/protovis/ex/minnesota.html

谢谢。

最简单的方法可能是为标题div 分配一个属性，让你使用 select 语句找到它们，如下所示：

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

在你的mouseoverfunc.

或者，你可以使你的 DOM 元素分层，以便你可以使用 this.parentNode.childNode 遍历所有子节点，遍历所有子节点，直到找到标题节点（请参阅如何遍历子节点。

我相信

下面的两个例子应该向您展示如何单独选择任何柱线并触发选择任何特定项目的回调......

  • "多个 D3 水平条形图与 HTML 布局结构混合在一起"
  • "多个 D3 垂直条形图与 HTML 布局结构混合在一起"

您会在回调函数"syncdMouseOver"和"syncdMouseOut"中注意到，它们触发了SVG画布上多个对象的更改...单个条形图、图例项目符号和图例文本字符串。 您将使用相同的方法来更改图表标题。

我希望这有所帮助。

弗兰克

相关文章：