Question

我的代码是

var width = d3.round($('.map-container').width());
var height =d3.round($(window).height()); 
var svg = d3.select("#india")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
//using geojson file mentioned above just name and extension changed
d3.json("/Scripts/in-states.js", function (json) {
    var center = d3.geo.centroid(json)
    var scale = 1000;
    var offset = [width / 2, height / 2];
    var projection = d3.geo.mercator()
                           .scale(scale)
                           .center(center)
                           .translate(offset);


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

      svg.selectAll("path")
                .data(json.features)
                .enter()
                .append("path")
                .attr("class", function (d) {
                    return "state " + d.properties.name;
                })
                .attr("stroke-width", "0.2em")
                .attr("fill",'#045A8D')
                .attr("d", path);
    });

现在，当渲染渲染时，feature ='Lakshadweep'的特征覆盖了整个地图。

here is the example！

我无法找出为什么会这样？因为上面提到的geojson按照预期在gist中工作。在这种情况下，路径（状态）的顺序是否重要？（我是svg和d3的新手）

Answer 1

看起来特定路径可能会被颠倒。您可以尝试将其加载到GIS程序（例如QGIS）中，然后再次导出为GeoJSON以进行标准化。

比例D3.js后的地理信息重叠

1 个答案: