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

Question

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

我认为我的代码生成了一系列 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 特征(或特征集合)应该适合您指定的尺寸。此方法设置比例和平移，因此如果没有功能，这些将不会被设置，并且您的投影将返回 NaN 值。

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

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