2

我正在使用 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 中复制

谢谢。

4

2 回答 2

1

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

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

在你的mouseoverfunc.

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

于 2012-04-27T05:17:12.887 回答
0

我相信以下两个示例应该向您展示如何单独选择任何条并触发选择任何特定项目的回调...

您会在回调函数“synchronizedMouseOver”和“synchronizedMouseOut”中注意到它们触发了 SVG 画布上多个对象的更改……一个单独的栏、一个图例项目符号和一个图例文本字符串。您将使用相同的方法来更改图表标题。

我希望这有帮助。

坦率

于 2012-05-01T22:23:23.963 回答