在地图D3 JavaScript中绘制点 [英] Plot points in map d3 javascript
问题描述
我想在地图上基于经度和纬度的地图上绘制地图,该文件名为tree.csv,在我使用图像的地图上. 我的csv文件包含很多行,因此我将在这里放几行
i want to draw on map base on longitude and latitude in csv file called tree.csv on a map that i using an image . My csv file include many lines ,so i will just put some lines here
经度
37.7295482207565 122.392689419827
37.7295482207565 122.392689419827
37.8030467266869 122.425063628702 ...... 这是我的代码
37.8030467266869 122.425063628702 ...... Here is my code
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是相同的数.我想也许我的数组还没有读过.但是我不确定这些问题.我被困住了.你们能解决我的问题吗?谢谢
I can see my map but i cant see any points on my map . When i inspect the web. i see that cx is Nan number ,and cy is same number. I think maybe my array havent been read yet. But i am not sure about the problems. I have been stucked. Can you guys solve me the problem ? Thank you
推荐答案
您的问题在于您没有提供要投影的坐标.
Your problem lies in that you aren't providing coordinates to be projected.
d3 geoProjection采用经度纬度对并将其投影到x,y svg坐标(投影返回的坐标为:[x,y],这就是为什么在代码中使用此形式的原因:projection(coord)[0]
获取cx值).您正在尝试仅投影经度,然后投影纬度:
A d3 geoProjection takes a longitude latitude pair and projects it to an x,y svg coordinate (a projection returns a coordinate as: [x,y], which is why you use this form in your code: projection(coord)[0]
to get the cx value). You are seeking to project only a longitude, and then only a latitude:
.attr("cx",function(d) { return projection(d["Longitude"])[0];})
.attr("cy",function(d) { return projection(d["Latitude"])[1];})
在这种情况下,projection
不会返回svg坐标,因为您没有为项目提供地理坐标.您需要同时投影经度和纬度,因为投影中产生的x和y值通常(并非总是)是相互依赖的-例如,在任何圆锥形投影中,输出y(或x)值都取决于纬度和经度.此外,随着projection()返回[x,y],每个投影都需要经度和纬度.
In this case, projection
won't return an svg coordinate as you aren't providing a geographical coordinate to project. You need to project both longitude and latitude, becuase x and y values produced in a projection are usually (not always) co-dependent - in any conical projection for example, the output y (or x) value is dependent on both latitude and longitude. Further, as projection() returns [x,y], it requires both longitude and latitude for every projection.
代替尝试:
.attr("cx",function(d) { return projection([d["Longitude"],d["Latitude"]])[0];})
.attr("cy",function(d) { return projection([d["Longitude"],d["Latitude"]])[1];})
请记住,d3地理投影应采用以下形式:projection([longitude, latitude])
,更改经度和纬度的顺序会产生意外的结果.
Remeber that d3 geoprojections expect the form: projection([longitude, latitude])
, changing the order of longitude and latitude will produce unexpected results.
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)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
这篇关于在地图D3 JavaScript中绘制点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!