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

Question

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

我希望图表在该省的 d3.mouseover 事件上显示更新的图表: http://gao8a.github.io/ (像这样)

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

(这些将需要大约 3 秒的时间来加载)

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

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

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

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

附言:

我打算制作一个 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)");

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

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

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

希望这对您有所帮助。