Question

我正在尝试使用从以下geojson转换的topojson文件渲染地图：Nigeria Wards in GeoJSON

我正在使用npm topojson转换器将文件转换为topojson，如下所示：

 topojson -o nig.json result.json

但是，当我在d3中实现网格划分时，它看起来像这样：

如您所见，某些边框已正确绘制，但大多数网格都是垃圾。

我认为数据必须已损坏或我的转换不正确。有没有其他人有这个问题，知道如何解决它？

这是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* CSS goes here. */

#map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.borders {
  fill: none;
  stroke: #777;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}
</style>

<body>
    <div id="map"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    var width = $('#map').width(),
        height = $('#map').height();

    var projection = d3.geo.mercator()
        .center([0.732, 0.540])
        .scale(4000)
        .translate([width / 10, height]);

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

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

    d3.json("nig.json", function(error, n) {
        svg.append("path")
            .datum(topojson.feature(n, n.objects.result))
            .attr("d", path);

        svg.append("path")
            .datum(topojson.mesh(n, n.objects.result))
            .attr("d", path)
            .attr("class", "borders");
    });

    </script>

Answer 1

做到了！使用http://mapshaper.org/将我的地图压缩到它的5％大小。现在它使用较少的数据点，它似乎工作得很好。

使用d3.js对地图进行网格划分

1 个答案: