지도의 점은 d3 자바 스크립트

Question

입니다. 이미지를 사용하는지도에서 tree.csv라는 csv 파일의 경도와 위도에 대한지도 기반을 그려야합니다. 내 csv 파일은 많은 행을 포함, 그래서 난 그냥 여기에 몇 가지 라인을 넣어

경도 위도됩니다 여기 37.8030467266869 122.425063628702 ......

37.7295482207565 122.392689419827

내 코드입니다

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가 같은 번호임을 압니다. 내 배열 havent 아직 읽은 것 같아요. 그러나 나는 문제에 대해 확신하지 못한다. 나는 갇혔다. 너희들이 내게 문제를 해결할 수 있니? 주셔서 감사합니다

Answer 1

귀하의 문제는 당신이 예상하는 좌표를 제공하지 않는 점이다.

d3 geoProjection은 경도 위도 쌍을 가져 와서 x, y svg 좌표로 투영합니다 (투영법은 [x, y]와 같은 좌표를 반환합니다). 코드에서이 양식을 사용하는 이유는 다음과 같습니다. projection(coord)[0] cx 값). 당신 만 위도 만 경도를 투영하고자하고있다 :이 경우

.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]를 반환하기 때문에 모든 투영법에 대해 경도와 위도가 모두 필요합니다.

대신 시도 : 그 D3의 geoprojections Remeber

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>