如何在d3.js地图上添加显示条形图的工具提示 [英] How to add a tooltip that shows a bar chart onto a d3.js map

问题描述

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

I have a map of the US with markers for stores in each state and currently when you hover over each marker, the name and address of that store shows up. I used a json file (us.json) to get the states coordinates and boundaries. The second json file (newstorelocations.json) contains information about each store and it's location which I used to display the markers. I used a tooltip for this.

我目前有在：
http://bl.ocks.org/binishbaig/3969ec74b485d1021034

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

我有一个第三个json文件（newstorespend.json），包含每个商店的产品和花费。变量StoreDescription存在于第二个和第三个json文件中。任何线索如何可以制作一个简单的垂直条形图，显示数量和产品的每个商店位置，当你悬停在每个标记？我对d3.js完全陌生，所以我猜想我必须写一个单独的函数创建一个单独的文件中的图表，然后将其传递到变量d在mouseover函数，但这只是一个猜测。我没有从第三个文件的数据制作条形图，但如何为每个商店制作单独的条形图，当鼠标悬停在相应的商店标记时显示。

I have a third json file (newstorespend.json) that contains products and amount spent for each store. The variable StoreDescription exists in both the second and third json file. Any clue how can I make a simple vertical bar chart displaying amount and product for each store location when you hover over each marker? I am totally new to d3.js so I am guessing I would have to write a separate function creating the chart in a separate file, and then pass it into that variable d in the mouseover function but that's purely a guess. I did make a bar chart out of the data from the third file but how do I make individual bar charts for each store and show it when the mouse hovers over the corresponding store marker.

我会感激任何帮助。提前感谢！

I would appreciate any help. Thanks in advance!

推荐答案

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

There's basically no difference between adding a chart to a tooltip vs doing it normally, you'll just need to grab the data and filter it so that it only applies to the data point that you're hovering over and then create/update the chart based on that data at the correct DOM element.

我已经分配了你的 gist ，就是这样。我只是使用您在 gist 中的 newstorespend.json 文件中的Anchorage数据。将鼠标悬停在Anchorage中的商店的数据点上，查看显示的内容。

I've forked your gist and done just that. I just used the data that you had for Anchorage in your newstorespend.json file in your gist. Hover over the data point for the store in Anchorage to see what shows up.

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

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

The onHover and offHover functions do all the work that you're probably interested in.

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

Note: this is only one way to do it, and possibly not even the best.

这篇关于如何在d3.js地图上添加显示条形图的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！