使用 d3.js 和 topoJSON 创建非洲地图答案

【问题标题】：Creating map of Africa using d3.js and topoJSON使用 d3.js 和 topoJSON 创建非洲地图
【发布时间】：2017-05-05 01:23:39
【问题描述】：

我想使用 d3.js 和 topoJSON 创建非洲地图。我有那个数据源https://gist.githubusercontent.com/bricedev/3905007f1794b0cb0bcd/raw/ad5c995f6990f7c3c7fad5c6206bc6fd5462f1fb/africa.json

这是我的代码。我如何获得属性并创建正确的地图？请帮我看看哪里出错了？

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="D3byEX 12.15" />
<meta charset="utf-8">
</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 = 1000, height = 728;


    var svg = d3.select("body").append("svg")
        .attr({ width: width, height: height });
    var mainGroup = svg.append("g");
    mainGroup.style({ stroke: "white", "stroke-width": "2px", "stroke-opacity": 0.0 });

    var projection = d3.geo.mercator();

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

    var url = 'https://gist.githubusercontent.com/bricedev/3905007f1794b0cb0bcd/raw/ad5c995f6990f7c3c7fad5c6206bc6fd5462f1fb/africa.json';
    d3.json(url, function (error, africa) {
        var countries = topojson.feature(africa, africa.objects.countries).features;
        var neighbors = topojson.neighbors(africa.objects.countries.geometries);

        var color = d3.scale.category20();
        mainGroup.selectAll("path", "countries")
            .data(countries)
            .enter().append("path")
            .attr("d", path)
            .style("fill", function (d, i) {
                return color(d.color = d3.max(neighbors[i],
                    function (n) { return countries[n].color; }) + 1 | 0);
            });

        mainGroup.selectAll("path")
            .on("mouseover", function () {
                console.log("mouseover");
                d3.select(this).style("stroke-opacity", 1.0);
            });
        mainGroup.selectAll("path")
            .on("mouseout", function () {
                d3.select(this).style("stroke-opacity", 0.0);
            });
    });

</script>

【问题讨论】：

标签： javascript d3.js maps topojson

【解决方案1】：

你的topojson不在WGS84中，也就是说lat/long坐标空间或者未投影的数据。 D3.projection() 需要 WGS84。

您的 topojson 已经被投影到，我假设是 Africa Lambert Conformal Conic 投影。您不需要使用投影来在 d3.js 中显示它。为了在没有投影的情况下显示此数据，您可以将 geoPath 的投影定义为：

path = d3.geoPath().projection(null);

这就是 topojson 在 the block 中投影数据的方式。

如果您需要缩放或平移投影，那么 d3.geoTransform 可以为您提供帮助，请参阅this block。

或者，您可以重新投影您的 topojson，以便它使用 lat/long 对，并使用 d3.projection() 正确投影。

【讨论】：