如何在 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 文件中的gist 中的安克雷奇数据。将鼠标悬停在安克雷奇商店的数据点上，看看会出现什么。

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

onHover 和 offHover 函数可以完成您可能感兴趣的所有工作。

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