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

【问题标题】：d3.js - Plotting points on zoomable, clickable mapd3.js - 在可缩放、可点击的地图上绘制点
【发布时间】：2013-03-24 02:09:04
【问题描述】：

我正在尝试调整在http://bl.ocks.org/mbostock/2206340 找到的地图并在其上绘制一些点。我在一个名为 data.csv 的 csv 文件中有我要使用的数据（纬度和经度），其格式如下：

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

我对代码所做的修改包含在下面的sn-p中

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);


});

地图渲染良好，但未显示绘图。知道这里可能有什么问题吗？我尝试了很多不同的东西，我不确定这是覆盖点的州地图问题，还是投影有问题......

【问题讨论】：

你看到this tutorial了吗？它使用了一种略有不同的方法，但解释了所有步骤。
我看到了这个教程，但假设城市的绘制方式并不是非常相关，因为它们是直接从一个 topoJSON 对象加载的。我不清楚那里的内容是否可以应用于从 csv 加载等。
您可以组合这两个数据集，这将使它们更容易绘制。无论如何，在我看来，您将坐标的字符串值传递给投影，而不是您在dataset 中创建的数字。我错过了什么还是这是问题所在？
使用+d["lon_0"] 可以解决这个问题，对吧？我曾尝试在调试时在这两者之间切换，但没有效果。如果我查看生成的元素（例如，<circle cx="-807.6795270197106" cy="1788.5726972077325" r="5" style="fill: #ff0000;"></circle>），红色圆圈元素存在，它们只是不可见。
您是否正在填充稍后生成的路径？如果是这样，他们会掩盖这些观点。尝试将生成路径的代码移到执行点的代码之前。

标签： csv plot maps d3.js

【解决方案1】：

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

在绘制圆圈之前绘制状态路径时可以使用。

【讨论】：