试图映射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值

回答

相关问题