如何添加工具提示,显示条形图到d3.js地图(How to add a tooltip that s

2019-10-22 09:57发布

我有地图,美国的带标记的商店在每个国家,目前,当你将鼠标悬停在每个标记,该商店的名称和地址显示出来。 我用了一个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所以我猜我会写一个单独的函数创建一个单独的文件图表,然后将它传递到鼠标悬停功能变量d但是这纯粹是猜测。 我没有做一个柱状图出从第三文件中的数据,但我怎么让个人条形图每个存储并显示它当鼠标悬停在该店铺的标记。

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

Answer 1:

有基本上添加图表工具提示VS常做的没有什么区别,你只需要获取数据并过滤,以便它仅适用于你悬停在数据点,然后创建/更新图表基于该数据在正确的DOM元素。

我已经分叉的gist ,并做到了这一点。 我只是用你在你已经为安克雷奇数据newstorespend.json文件在您的gist 。 将鼠标悬停在在安克雷奇的存储中的数据点上可看到显示的内容。

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

onHoveroffHover功能做的一切,你大概在感兴趣的工作。

注意:这仅仅是一个办法做到这一点,可能甚至不是最好的。



文章来源: How to add a tooltip that shows a bar chart onto a d3.js map