尝试创建一个 topoJSON 脚本导致乱码 svg

Question

我正在尝试学习如何使用 topoJSON。

当我使用此示例中的代码时 https://bl.ocks.org/mbostock/4090870 它工作正常。

但后来我尝试使用本教程 https://www.youtube.com/watch?v=aNbgrqRuoiE and for some json files I found, I was able to get it to work properly. But when I try to use the json file from the first example (https://d3js.org/us-10m.v1.json) for some reason the SVG comes out scrambled (as you can see here https://jsfiddle.net/1dahx8jg/) 我不知道我做错了什么。有人能指出我正确的方向吗？

jsfiddle 中的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            * {
                font-family: "Helvetica Neue";
            }
            p {
                font-size: 0.85em;
            }
            svg {
                background: #efefef;
            }
            .region {
                fill: #cccccc;
                stroke:#333333;
                stroke-width: 0.5;
             }

            .selected {
                fill: yellow;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="https://d3js.org/topojson.v2.min.js"></script>
        <script>
            (function () {
                var margin = { top: 50, left: 50, right: 50, bottom: 50 },
                    height = 400 - margin.top - margin.bottom,
                    width = 800 - margin.left - margin.right;

                var svg = d3.select("#map")
                    .append("svg")
                    .attr("height", height + margin.top + margin.bottom)
                    .attr("width", width + margin.left + margin.right)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                d3.queue()
                    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
                    .await(ready);

                function ready(error, data) {
                    console.log(data)

                    var projection = d3.geoMercator()
                        .translate([width / 2, height / 2])
                        .scale(100)

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


                    var regions = topojson.feature(data, data.objects.counties).features;

                    svg.selectAll(".region")
                        .data(regions)
                        .enter().append("path")
                        .attr("class", "region")
                        .attr("d", path )

                }

            })();
        </script>
    </body>
</html>

Answer 1

去掉投影就解决了。

尝试创建一个 topoJSON 脚本导致乱码 svg

Trying to create a topoJSON script results in scrambled svg

javascript

json

topojson