在鼠标悬停事件上更新 D3.js 图

Posted 2023-03-05

【中文标题】在鼠标悬停事件上更新 D3.js 图

【英文标题】：Updating D3.js graph on mouseover event

【发布时间】：2015-03-11 22:43:59

【问题描述】：

我是 d3 的新手，我将 mbostock 的堆叠条形图示例 (http://bl.ocks.org/mbostock/3886208) 与地图相结合以显示数据 (canada.json)

我希望图表显示该省 d3.mouseover 事件的更新图表： http://gao8a.github.io/（类似这样的）

不幸的是，我只能显示轴。它显示多个或相同的轴重叠：

（加载大约需要 3 秒）

多个： http://bl.ocks.org/GAO8A/566e238a72e5ebd1e2c1

同轴重叠 http://bl.ocks.org/GAO8A/64f94bb494c4a73f2bf6

我知道我可能需要一个“mouseout”事件来删除以前的事件，但我也不太清楚如何设计。

谁能指出我做错了什么以及我应该如何加载数据？

PS：

我打算制作一个 jsfiddle，但似乎无法让它与我托管的 canada.json 数据一起工作。 https://raw.githubusercontent.com/GAO8A/GAO8A.github.io/master/canada.json

谢谢

【参考方案1】：

您的问题是您不断在 tooltip 元素中添加轴。不幸的是，这会产生重叠。您可以做的是添加一次轴，然后使用与悬停元素相对应的新值重新调整其域。

所以本质上如果你可以添加以下几行：

var X_AXIS  = tooltip.append("g").attr("class", "x axis x-axis").attr("transform", "translate(0," + height + ")");
X_AXIS.call(xAxis)
X_AXIS.append("text").attr("dy", "3em").attr("dx", "50em").style("text-anchor", "end").text("Month");
var Y_AXIS  = tooltip.append("g").attr("class", "y axis y-axis")
Y_AXIS.call(yAxis)
Y_AXIS.append("text").attr("transform", "rotate(-90)").attr("dy", "-3em").attr("dx", "-8em").style("text-anchor", "end").text("Temperature (Celcius)");

就在添加地图之前，这在某种意义上会“初始化”轴。

因此，在您的 mouseover 处理程序中，您可以在确定您的 x 和 y 域之后添加以下行。

X_AXIS.call(xAxis)
Y_AXIS.call(yAxis)

或者更好的是，添加一些过渡：

X_AXIS.transition().duration(400).call(xAxis)
Y_AXIS.transition().duration(400).call(yAxis)

这样，您无需继续添加轴，只需重新调整当前初始化的轴。

希望这会有所帮助。