D3.js 显示 Topojson答案

【问题标题】：D3.js display TopojsonD3.js 显示 Topojson
【发布时间】：2015-02-21 21:02:10
【问题描述】：

我在使用 topojson 绘制委内瑞拉时遇到了问题。我从以下地址获得了委内瑞拉的 GeoJson 数据：http://code.highcharts.com/mapdata/countries/ve/ve-all.geo.json

之后，我尝试使用 topojson 控制台实用程序并将其导入此站点：http://www.mapshaper.org/ 并将其导出为 topojson。我无法渲染地图。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
    var width = 960,
        height = 1160;

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

    d3.json("venezuela.json", function(error, ve) {
        var path = d3.geo.path();
        svg.append("path")
                .datum(topojson.feature(ve, ve.objects['ve-all.geo']))
                .attr("d", d3.geo.path().projection(d3.geo.mercator()));
    });

</script>

</body>
</html>

还有topojson：https://gist.githubusercontent.com/rickitan/665af7cc271baf652a90/raw/ed7341aa5431524083c6a1783eb9d32501357a91/mapShaperOutput

我不确定问题是否出在从 geojson 到 topojson 的转换或其他方面。

非常感谢，

里卡多

【问题讨论】：

标签： d3.js geojson topojson mapshaper

【解决方案1】：

首先你应该在添加层之前声明一个path和projection：

var projection = d3.geo.mercator().translate([0, 0]).scale(8400000);
var path = d3.geo.path().projection(projection);

当您导入图层时，它会更加干净。之后只需调用这样的代码：

var featureCollection = topojson.feature(currentMap, currentMap.objects.poly_bg);
            g.append("g")
                .selectAll("path")
                .data(featureCollection.features)
                .enter().append("path")
                .attr("d", path);

【讨论】：