javascript - 如何将位置特定数据添加到 map 上的标记

Question

我对 d3.js 和论坛都很陌生。因此，如果之前已经有人问过这个问题，我深表歉意。我正在尝试创建一张带有商店标记的美国 map ，当您将鼠标悬停在这些商店上时，应该会弹出与该位置相关的数据。最终，我尝试向这些标记添加垂直条形图，但现在我将只显示商店的名称和地址，以便我可以分解该过程以完全理解它。我有两个 json 文件: 1.us.json 2. newstorelocations.json(包含每个位置的名称、地址、纬度和经度)

到目前为止，我拥有的是一张美国 map ，其中标有每个商店的标记。当您将鼠标悬停在其上时，标记会变成红色。其代码在这里: http://bl.ocks.org/binishbaig/a4d93ddbb599eaf5f20a

我尝试过并认为它应该有效的代码在这里: http://bl.ocks.org/binishbaig/e154f91c726fb8326c3b

我只是不知道为什么当你将鼠标悬停在第二个图标上时，它没有显示商店名称。

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

Answer 1

主要问题发生在第 122 行。d 变量是匿名函数的一部分，因此它不是上面定义的变量。我解决了将 d (d.name) 变量的 name 属性作为值传递给 text 方法而不是使用匿名函数的问题。

其他问题与 #tooltip 选择器有关(第 57 行 your code )。您在第 58 行的 ma​​p 元素之后定义了它，因此当指向坐标时不会显示它。我通过将 #tooltip 选择器移动到 map 元素顶部来解决这个问题。

My solution: DEMO

希望我的回答对您有所帮助。谢谢。