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

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

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

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

希望这有帮助。

在mouseover事件上更新D3.js图

1 个答案: