試圖映射geojson數據時，在svg路徑'd'attr中獲取NaN值

我一直在嘗試使用d3映射some GeoJSON data，但嘗試失敗。試圖映射geojson數據時，在svg路徑'd'attr中獲取NaN值

我認爲我的代碼生成一系列path scg元素的具體問題，其d屬性最終包含NaN值。這裏有一個結果我得到的一個例子：

<path fill="#ccc" stroke="#333" d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNZ"> 
</path>

這裏是我的代碼如下所示：

var width = 960; 
var height = 960; 

var dataUrl = 
    "https://gist.githubusercontent.com/ezmiller/35d6a354fa1da0bd076dfe7b74a30a7d/raw/9398ec491e0dc9b38f7f251e5c7bf90ad8b45779/2016-kings-county-pres-primary-35th.json"; 

var projection = d3.geoConicEqualArea() 
    .parallels([73.97369384765625, 40.64664205310956]) 
    .rotate([89.5,0]) 
    .fitSize([960, 960]); 

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

var svg = d3 
    .select("body") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var g = svg.append('g'); 

var mapLayer = g.append('g') 
    .classed('map-layer', true); 

d3.json(dataUrl, function(err, data) { 
    if (err) throw err; 

    mapLayer.selectAll('path') 
    .data(data.features) 
    .enter() 
    .append('path') 
    .attr("fill", "#ccc") 
    .attr("stroke","#333") 
    .attr("d", path); 
});

（這裏是一個codepen）

我在做什麼錯在這裏？

來源

2017-10-15 fraxture

的問題是，你是不是嵌合突起任何與.fitSize

fitSize採用兩個參數，具有寬度和高度以及GeoJSON的特徵的陣列：projection.fitSize([width,height],geojson)。你需要指定什麼geojson特徵（或特徵collextion）應該適合你指定的尺寸。此方法設置縮放和平移，因此如果沒有特徵，這些將不會被設置，並且您的投影將返回NaN值。

由於您的geojson在您的d3.json回調被觸發之前未加載，所以必須在回調中調用此方法。還要注意，該方法需要一個特徵或特徵集合，而不是一系列特徵（數據，而不是數據。特徵）：

projection.fitSize([960,960],data)

來源

2017-10-15 06:33:30

試圖映射geojson數據時，在svg路徑'd'attr中獲取NaN值

回答

相關問題