Question

我试图为包括各省在内的荷兰制作带有D3和TopoJSON的地图。这是代码：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script type="text/javascript" src="http://localhost/webserver/d3/d3.js"></script>
    <script type="text/javascript" src="http://localhost/webserver/topojson/topojson.js"></script>
        <style type="text/css">

            div.bar {
                display: inline-block;
                width: 20px;
                height: 75px;
                background-color: teal;
                margin-right: 2px;
            }
            .pumpkin {
                fill: rgba(128, 0, 128, 0.75);
                stroke: yellow;
                stroke-width: 5;
            }
            .apple {
                fill: rgba(0, 255, 0, 0.55);
                stroke: green;
                stroke-width: 15;
            }
            .orange {
                fill: rgba(255, 255, 0, 0.55);
                stroke: orange;
                stroke-width: 10;
            }
            .subunit    { fill: #cdc; }
            .subunit-label  {
                fill: #777;
                fill-opacity: .25;
                font-size:  30px;
                font-weight: 300;
                text-anchor: middle;}

            .provincie  {fill: none; }
            .Utrecht    {fill: #ddd; }
            .Zuid-Holland   {fill: #dde; }
            .Noord-Holland  {fill: #dee; }
            .Drenthe    {fill: #aae; }
            .Gelderland     {fill: #eee; }
            .Friesland  {fill: #ddc; }
            .Groningen  {fill: #dcc; }
            .Limburg    {fill: #ccc; }
            .Noord-Brabant  {fill: #ddb; }
            .Overijssel     {fill: #dbb; }
            .Zeeland    {fill: #bbb; }
        </style>    
    </head>
    <body>
    <script type="text/javascript">

    var width = 960, height = 860;

    var projection = d3.geo.albers()
        .center([6, 49.40])
        .rotate([0, -1.9])
        .parallels([50, 60])
        .scale(11000)
        .translate([width / 2, height / 2]);

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


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

    d3.json("http://localhost/webserver/data/nl.json", function(error, nl) {
        svg.selectAll(".subunit")
        .data(topojson.object(nl, nl.objects.subunits).geometries)
            .enter().append("path")
            .attr("class", function(d) { return "subunit " + d.id; })
        .attr("d", path);

        svg.selectAll(".subunit-label")
        .data(topojson.object(nl, nl.objects.subunits).geometries)
        .enter().append("text")
        .attr("x", -20)
        .attr("y", -50)
        .attr("class", function(d) { return "subunit-label " + d.id; })
        .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .text(function(d) { return d.properties.name; });

        svg.selectAll(".provincie")
        .data(topojson.object(nl, nl.objects.provincies).geometries)
        .enter().append("path")
            .attr("class", function(d) { return "provincie " + d.properties.name; })
        .attr("d", path);

        svg.append("path")
        .datum(topojson.object(nl, nl.objects.places))
        .attr("d", path)
            .attr("class", "place");

        svg.selectAll(".place-label")
        .data(topojson.object(nl, nl.objects.places).geometries)
        .enter().append("text")
        .attr("class", "place-label")
        .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
        .attr("dy", ".35em").text(function(d) { return d.properties.name; });

        svg.selectAll(".place-label")
        .attr("x", function(d) { return d.coordinates[0] > -1 ? 10 : -10; })
            .style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; });
        }); 
    </script>
    </body>
</html>

结果是荷兰的地图，但它不包含省份（有颜色和边界）。

我收到以下错误：

未捕获的TypeError：无法读取未定义topojson.js的属性'type'：187

这是186和187行：

函数几何（o）{

var t = o.type，g = t ===“GeometryCollection”？ {type：t，geometry：o.geometries.map（geometry）}

Answer 1

看起来您正在引用拓扑中不存在的对象。

你的TopoJSON文件是否可能使用“省”的英文拼写而不是荷兰语“provincies”？如果是，那么nl.objects.provincies将为空，您需要在代码中引用nl.objects.provinces，或者编辑TopoJSON文件以使用荷兰语拼写“provincies”。

你可以发布nl.json的内容，这样我们可以看一下（比如在dropbox上）吗？

topojson.js：187：未捕获的TypeError：无法读取未定义的属性“类型”

1 个答案: