时间戳

首页 > 解决方案 > 为什么我不能使用 topojson 获得 d3.js 地图来渲染？

d3.js - 为什么我不能使用 topojson 获得 d3.js 地图来渲染？

问题描述

我在让 d3 从 topoJson 数据中渲染 geoAlbersUsa 投影时遇到了一些困难。我正在显示一个空白屏幕，但没有返回任何错误。geoJson 数据似乎很好，但由于某种原因它没有呈现路径。任何帮助将不胜感激！

以下是相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
</head>
<body>
    <script>
        const width = 1000;
        const height = 600;

        const projection = d3.geoAlbersUsa()
            .translate([width / 2, height / 2])
            .scale(800);

        const path = d3.geoPath(projection);

        const svg = d3.select("body")
            .append("svg")
            .attr("height", height)
            .attr("width", width)
            .style("display", "block")
            .style("margin", "auto");

        d3.json("https://d3js.org/us-10m.v1.json").then(data => {
            svg.selectAll(".states")
                .data(topojson.feature(data, data.objects.states).features)
                .attr("d", path)
                .style("fill", "none")
                .attr("class", "states")
                .style("stroke", "black")
                .style("stroke-width", "2px")
        });
    </script>
</body>
</html>

标签： d3.jstopojson

解决方案

您需要加入一个元素：

            .data(topojson.feature(data, data.objects.states).features)
            .join("path") // here
            .attr("d", path)
            .style("fill", "none")
            .attr("class", "states")
            .style("stroke", "black")
            .style("stroke-width", "2px")

推荐阅读