如何将显示条形图的工具提示添加到d3.js地图上

Question

我有一张美国地图，每个州都有商店标记，目前当您将鼠标悬停在每个标记上时，该商店的名称和地址就会显示出来。我使用了一个json文件（us.json）来获取状态坐标和边界。第二个json文件（newstorelocations.json）包含有关每个商店的信息以及我用于显示标记的位置。我使用了工具提示。

我目前所拥有的是： http://bl.ocks.org/binishbaig/3969ec74b485d1021034

要旨： https://gist.github.com/binishbaig/3969ec74b485d1021034

我有第三个json文件（newstorespend.json），其中包含每个商店所花费的产品和金额。变量StoreDescription存在于第二个和第三个json文件中。有什么线索，当您将鼠标悬停在每个标记上时，如何制作显示每个商店位置的金额和产品的简单垂直条形图？我是d3.js的新手，所以我猜我必须编写一个单独的函数，在一个单独的文件中创建图表，然后将它传递给mouseover函数中的变量d，但这纯粹是猜测。我确实从第三个文件的数据中制作了条形图，但是如何为每个商店制作单独的条形图，并在鼠标悬停在相应的商店标记上时显示它。

我将不胜感激任何帮助。提前谢谢！

Answer 1

将图表添加到工具提示与正常工作之间基本没有区别，您只需要抓取数据并对其进行过滤，以便它只适用于您悬停的数据点，然后创建/在正确的DOM元素上基于该数据更新图表。

我已经分配了你的gist并完成了这一点。我刚刚在newstorespend.json的{​​{1}}文件中使用了您对Anchorage的数据。将鼠标悬停在安克雷奇的商店数据点，查看显示的内容。

您可以查看http://bl.ocks.org/benlyall/37e757a1e6922dccb077

gist和onHover函数执行您可能感兴趣的所有工作。

注意：这只是一种方法，甚至可能不是最好的。