尝试映射 geojson 数据时在 svg 路径 'd' attr 中获取 NaN 值

Question

我一直在尝试使用 d3 映射 some GeoJSON data，但没有成功。

我认为我的代码生成一系列 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)

我做错了什么？

Answer 1

问题是你没有用 .fitSize

将投影拟合到任何东西

fitSize 采用两个参数，一个具有宽度和高度的数组以及一个 geojson 特征：projection.fitSize([width,height],geojson)。您需要指定哪些 geojson 功能（或功能集合）应该适合您指定的尺寸。此方法设置比例和平移，因此如果没有功能，将不会设置这些，并且您的投影将 return NaN 值。

由于在触发 d3.json 回调之前不会加载您的 geojson，因此必须在回调中调用此方法。另请注意，该方法需要一个特征或特征集合，而不是特征数组（数据，在您的情况下不是 data.features）：

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

尝试映射 geojson 数据时在 svg 路径 'd' attr 中获取 NaN 值

Getting NaN values in svg path 'd' attr when trying to map geojson data

svg

visualization

geojson

d3.js