4

我试图用 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>

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

我收到以下错误：

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

这是第 186 和 187 行：

函数几何（o）{

var t = o.type, g = t === "GeometryCollection" ? {类型：t，几何：o.geometries.map（几何）}

4

1 回答 1

9

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

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

您能否发布 nl.json 的内容以便我们查看（例如，在 Dropbox 上）？

于 2013-03-20T00:49:54.813 回答