如何在 d3.js 地图上添加显示条形图的工具提示
How to add a tooltip that shows a bar chart onto a d3.js map
我有一张美国地图，上面标有每个州的商店标记，目前当您将鼠标悬停在每个标记上时，会显示该商店的名称和地址。我使用 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 但这纯粹是一个猜测。我确实用第三个文件的数据制作了一个条形图，但是我如何为每个商店制作单独的条形图并在鼠标悬停在相应的商店标记上时显示它。
如有任何帮助，我将不胜感激。提前致谢！
将图表添加到工具提示与正常添加图表基本上没有区别，您只需要获取数据并对其进行过滤，使其仅适用于您悬停的数据点，然后create/update 基于正确 DOM 元素的数据的图表。
我已经分叉了你的 gist 并做到了。我刚刚在 gist 中的 newstorespend.json 文件中使用了您在 Anchorage 的数据。将鼠标悬停在安克雷奇商店的数据点上以查看显示的内容。
你可以看看http://bl.ocks.org/benlyall/37e757a1e6922dccb077
onHover 和 offHover 函数可以完成您可能感兴趣的所有工作。
注意：这只是一种方法，甚至可能不是最好的方法。
我有一张美国地图，上面标有每个州的商店标记，目前当您将鼠标悬停在每个标记上时，会显示该商店的名称和地址。我使用 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 但这纯粹是一个猜测。我确实用第三个文件的数据制作了一个条形图，但是我如何为每个商店制作单独的条形图并在鼠标悬停在相应的商店标记上时显示它。
如有任何帮助，我将不胜感激。提前致谢！
将图表添加到工具提示与正常添加图表基本上没有区别，您只需要获取数据并对其进行过滤，使其仅适用于您悬停的数据点，然后create/update 基于正确 DOM 元素的数据的图表。
我已经分叉了你的 gist 并做到了。我刚刚在 gist 中的 newstorespend.json 文件中使用了您在 Anchorage 的数据。将鼠标悬停在安克雷奇商店的数据点上以查看显示的内容。
你可以看看http://bl.ocks.org/benlyall/37e757a1e6922dccb077
onHover 和 offHover 函数可以完成您可能感兴趣的所有工作。
注意：这只是一种方法，甚至可能不是最好的方法。