我的GeoJSON中是否存在畸形或D3代码中存在错误？

Question

我是d3和GeoJson的新手。我有this GeoJSON，显示在geojson lint上。我正在尝试使用以下代码将GeoJSON显示为地图：

var width = 960,
    height = 1160;

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

var projection = d3.geo.transverseMercator().translate([width / 2, height / 2]).scale(150).center(-90.088, 29.957);

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

d3.json("orleans.json", function(json) {
    svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);
});

倒数第二行.attr（“d”，path）在d3堆栈跟踪中引发了以下错误：

Error: Problem parsing d="MNaN,NaNLNaN,NaNL8.76110196153104,1051.238898038469L8.76110196153104,108.76110196153104L951.238898038469,108.76110196153104L951.238898038469,1051.238898038469LNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNZMNaN,NaNLNaN,NaNLNaN,NaNZMNaN,NaNLNaN,NaNLNaN,NaNZMNaN

我的GeoJSON有问题吗？或者我如何使用带有D3的GeoJSON？看起来这个错误来自对D3的错误输入 - 但我的GeoJSON lint。所以这可能是我的D3语法问题，而不是我的GeoJSON？

GeoJSON看起来似乎正在正确加载。当我在调用后立即调用console.log（json） 到d3.json("orleans.json", function(json)它显示以下内容：

Answer 1

您的代码存在两个问题：

• .center()函数采用单个数组参数，而不是两个。
• 横向墨卡托投影不支持antimeridian切割。

要修复，请传递一个数组而不是两个数字，并将中心限制在-90度或更低。完整演示here。