Question

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

所以，如果我添加如下内容：

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。

Answer 2

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

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

我希望这会有所帮助。

谢

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

2 个答案: