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

Question

我正在尝试调整在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

我修改过的代码包含在以下片段中。

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


});

地图呈现正常，但没有显示出绘图。你有什么想法这里可能出了什么问题吗?我已经尝试了很多不同的方法，不确定是州地图覆盖了点，还是投影有问题...

- araspion

---

我看了这个教程，但是认为绘制城市的方式并不是非常相关，因为它们直接从topoJSON对象中加载。 对于从csv等文件加载内容，那里的内容似乎并不适用，这一点并不清楚。 - araspion

你可以将这两个数据集合并，这样更容易绘制。无论如何，我觉得你正在将坐标的字符串值传递给投影，而不是在“dataset”中创建的数字。我是否遗漏了什么或者这就是问题所在？ - Lars Kotthoff

你有填写后面生成的路径吗？如果是这样，它们会遮挡住点。尝试将生成路径的代码移动到处理点的代码之前。 - Lars Kotthoff

好的，我会将这个作为答案添加以备将来参考。 - Lars Kotthoff

你成功让圆圈在点击和缩放时移动了吗？为了让它正常工作，我不得不将你的“states”变量重命名为当前mbostock链接中的“g”变量。但是当我点击和缩放时，我的地图会移动，但圆圈不会。谢谢！BH - Buzzy Hopewell

Answer 1

示例中绘制的路径是填充的，也就是说，它们后面的任何内容都会被遮挡。SVG元素按照指定的顺序绘制。在您的情况下，圆圈先绘制，然后是州的路径，因此遮挡了圆圈。

在绘制圆之前绘制状态路径时，可以解决这个问题。

- Lars Kotthoff