在地图d3 javascript中绘制点

Question

我想在地图上绘制基于经度和纬度的csv文件，名为tree.csv在我使用图像的地图上。 我的csv文件包含很多行，所以我只想在这里添加一些行

经度纬度

37.7295482207565 122.392689419827

37.8030467266869 122.425063628702 ...... 这是我的代码

d3.csv("/trees.csv", function(data) {
    dataset=data.map(function(d) { return [+d["Longitude"],+d["Latitude"] ];});
    console.log(data)
    var width = 750,
    height = width;

    // Set up projection that map is using
    var projection = d3.geo.mercator()
     .center([-122.433701, 37.767683])

     .scale(225000)
     .translate([width / 2, height / 2]);

    var path=d3.geo.path().projection(projection);


    var svgContainer=d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height);
    svgContainer.append("image")
     .attr("width", width)
     .attr("height", height)
     .attr("xlink:href", "/Ilu.svg");

    var trees=svgContainer.selectAll("circles")
    .data(data).enter()
    .append("circles")

    var treesAttributes=trees
    .attr("cx",function(d) { return projection(d["Longitude"])[0];})
    .attr("cy",function(d) { return projection(d["Latitude"])[1];})
    .attr("r","100px")
    .style("fill","red");

我可以看到我的地图，但我无法在地图上看到任何点。当我检查网络时。我看到cx是Nan数，cy是相同数。我想也许我的阵列还没有读过。但我不确定这些问题。我被困了。你能解决我的问题吗？谢谢

Answer 1

您的问题在于您没有提供要投影的坐标。

d3 geoProjection采用经度纬度对并将其投影到x，y svg坐标（投影返回坐标为：[x，y]，这就是您在代码中使用此形式的原因：{{1}获取cx值）。你想要只投射一个经度，然后只是一个纬度：

projection(coord)[0]

在这种情况下，.attr("cx",function(d) { return projection(d["Longitude"])[0];}) .attr("cy",function(d) { return projection(d["Latitude"])[1];}) 不会返回svg坐标，因为您没有为项目提供地理坐标。您需要投影经度和纬度，因为投影中产生的x和y值通常（并非总是）相互依赖 - 例如，在任何圆锥投影中，输出y（或x）值取决于纬度和经度。此外，当projection（）返回[x，y]时，它需要每个投影的经度和纬度。

而是尝试：

projection

记得d3地理位置投影期望表格：.attr("cx",function(d) { return projection([d["Longitude"],d["Latitude"]])[0];}) .attr("cy",function(d) { return projection([d["Longitude"],d["Latitude"]])[1];}) ，改变经度和纬度的顺序会产生意想不到的结果。

projection([longitude, latitude])

var data = [
{longitude:1,latitude:1},
{longitude:-1,latitude:1},
{longitude:1,latitude:-1},
{longitude:-1,latitude:-1}
]

var svg = d3.select("body")
   .append("svg")
   .attr("width",200)
   .attr("height",200);
   
var projection = d3.geoMercator()
  .translate([100,100]);
  
var circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx",function(d) { return projection([d.longitude,d.latitude])[0];
   })
  .attr("cy",function(d) { return projection([d["longitude"],d["latitude"]])[1];
   })
   .attr("r",2)