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

Question

我是 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

谢谢

Answer 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)");

就在添加您的地图之前，这在某种意义上是 'initialize' 坐标轴。

因此，在您的 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)

这样，您就不会继续添加轴，只需重新调整当前初始化的轴即可。

希望对您有所帮助。

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

Updating D3.js graph on mouseover event

html

javascript

json

d3.js