如何将位置特定数据添加到地图上的标记

时间:2015-03-18 21:47:02

标签: javascript d3.js

我对d3.js和论坛都很新。如果以前已经问过这个问题,我很抱歉。我正在尝试创建一个美国地图,其中包含商店标记,当您将鼠标悬停在这些商店上时,应弹出与该位置相关的数据。最后,我试图为这些标记添加一个垂直条形图,但是现在我将决定只显示商店的名称和地址,这样我就可以打破这个过程以完全理解它。我有两个json文件:  1. us.json  2. newstorelocations.json(包含每个位置的名称,地址,纬度和经度)

到目前为止,我所拥有的是美国地图,每个商店都有标记。将鼠标悬停在其上时,标记会变为红色。代码在这里: http://bl.ocks.org/binishbaig/a4d93ddbb599eaf5f20a

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

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

非常感谢任何帮助。提前谢谢!

2 个答案:

答案 0 :(得分:0)

您遇到的问题位于文档的第122行。它试图读取属性" name"一个未定义的变量/对象。这意味着变量d(您希望将其作为参数传递给那里的匿名函数)实际上并未传递。看看是否只是从匿名函数中删除d(d){return d.name;第122行上的定义允许您从我们可以看到它可访问的作用域访问对象d(因为我们看到对象被记录到控制台)。如果这不起作用,那么您将需要找到另一种方法来访问该对象,其中有多个解决方案。

答案 1 :(得分:0)

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

其他问题与#tooltip选择器有关(第57行your code)。您在第58行的 map 元素之后定义了它,因此在指向坐标时未显示它。我通过在地图元素顶部移动#tooltip选择器来解决它。

My solution: DEMO

我希望你的回答很有帮助。 谢谢。