d3.js - 在可缩放的可点击地图上绘制点 [英] d3.js - Plotting points on zoomable, clickable map

问题描述

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

I am trying to adapt the map found at http://bl.ocks.org/mbostock/2206340 and plot some points on it. I have the data I am trying to use (latitudes and longitudes) in a csv file called data.csv, which is formatted like this:

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

我对代码所做的修改包含在以下片段

The modification to the code I made is contained in the following snippet

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


});

地图渲染得很好，但不显示绘图。任何想法可能是错在这里？我试过一堆不同的东西，我不知道是否是一个问题的状态地图覆盖的点，或者如果东西是错误的投影...

The map renders fine, but the plots are not shown. Any idea what could be wrong here? I've tried a bunch of different things, I'm not sure if it is a matter of the states map covering the points, or if something is wrong with the projection...

推荐答案

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

The paths drawn in the example are filled, i.e. anything behind them will be obscured. SVG elements are drawn in the order they are specified. In your case, the circles are drawn first and then the paths for the states, thereby obscuring the circles.

在绘制圆圈之前绘制状态路径时，它工作。

It works when you draw the state paths before drawing the circles.

这篇关于d3.js - 在可缩放的可点击地图上绘制点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！