d3.js - 在可缩放，可点击的地图上绘制点

我正在尝试修改在http://bl.ocks.org/mbostock/2206340处找到的地图并绘制一些点。我有数据，我想在一个名为data.csv一个CSV文件，该文件的格式像这样使用（经度和纬度）：d3.js - 在可缩放，可点击的地图上绘制点

lon_0,lat_0,lon_1,lat_1 
-122.1430195,37.4418834,-122.415278,37.778643 
-122.1430195,37.4418834,-122.40815,37.785034 
-122.4194155,37.7749295,-122.4330827,37.7851673 
-122.4194155,37.7749295,-122.4330827,37.7851673 
-118.4911912,34.0194543,-118.3672828,33.9164666 
-121.8374777,39.7284944,-121.8498415,39.7241178 
-115.172816,36.114646,-115.078011,36.1586877

修改的代码我做了包含在下面的代码片段

d3.json("us-states.json", function(json) { 
    d3.csv("data.csv", function(data) { 
    dataset = data.map(function(d) { return [ +d["lat_0"], +d["lon_0"] ]; }); 
    console.log(data) 
    states.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
       return projection([d["lon_0"], d["lat_0"] ])[0]; 
       }) 
    .attr("cy", function(d) { 
       return projection([d["lon_0"],d["lat_0"] ])[1]; 
       }) 
    .attr("r", 5) 
    .style("fill", "red"); 

}); 

    states.selectAll("path") 
     .data(json.features) 
    .enter().append("path") 
     .attr("d", path) 
     .on("click", click); 


});

地图呈现良好，但地块没有显示。任何想法在这里可能是错的？我试过了一堆不同的东西，我不确定它是否是覆盖点的状态图，或者投影是否有问题...

来源

2013-04-02 araspion

您是否看到[本教程]（http://bost.ocks.org/mike/map/）？它使用了一个稍微不同的方法，但解释了所有步骤。 –

我看过本教程，但认为城市绘制的方式并不是非常相关，因为它们是直接从topoJSON对象加载的。我不清楚那里的内容可能适用于从csv加载等。 – araspion

您可以合并两个数据集，这将使它们更容易绘图。无论如何，它看起来像你将坐标的字符串值传递给投影，而不是你在'dataset'中创建的数字。我错过了什么，或者这是问题吗？ –

示例中绘制的路径是填充，即在它们后面的任何东西都将被遮盖。 SVG元素按照它们指定的顺序绘制。在你的情况下，首先绘制圆，然后绘制状态的路径，从而模糊圆圈。

它在绘制圆之前绘制状态路径时起作用。

来源

2013-04-02 18:25:48

d3.js - 在可缩放，可点击的地图上绘制点

回答

相关问题