地図のプロット点d3 javascript

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は同じ番号であることが分かります。私の配列はまだ読まれていないかもしれないと思う。しかし、私は問題については分かりません。私はくっついた。皆さんは私に問題を解決できますか？ありがとう

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思い出してくれる

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