使用d3.js对地图进行网格划分
我正在尝试使用从以下geojson转换的topojson文件渲染地图： 我正在使用npm转换器将文件转换为topojson，如下所示：使用d3.js对地图进行网格划分,d3.js,geojson,topojson,D3.js,Geojson,Topojson,我正在尝试使用从以下geojson转换的topojson文件渲染地图： 我正在使用npm转换器将文件转换为topojson，如下所示： topojson -o nig.json result.json 但是，当我在d3中实现网格划分时，它看起来是这样的： 如您所见，一些边界已正确绘制，但大多数网格都是垃圾 我认为要么数据已经损坏，要么我的转换不正确。 有没有其他人有过这个问题，并且知道如何解决它 这是我的代码： <!DOCTYPE html> <meta charset=
topojson -o nig.json result.json
<!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>
/*CSS在这里*/
#地图{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.边界{
填充：无；
行程：777；
笔划数组：2,2；
笔划线条连接：圆形；
}
变量宽度=$（“#映射”）.width（），
高度=$（“#地图”）.height（）；
var projection=d3.geo.mercator（）
.中间（[0.732,0.540]）
.比例尺（4000）
.平移（[宽度/10，高度]）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“映射”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“nig.json”），函数（错误，n）{
追加（“路径”）
.datum（topojson.feature（n，n.objects.result））
.attr（“d”，路径）；
追加（“路径”）
.datum（topojson.mesh（n，n.objects.result））
.attr（“d”，路径）
.attr（“类别”、“边界”）；
});