topojson.js:187: Uncaught TypeError: Cannot read property 'Typ' undefined

Ich einen Versuch zu machen, eine Karte mit D3 und TopoJSON für die Niederlande, einschließlich der Provinzen.
Dies ist der code:

<!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>

Das Ergebnis ist die Karte der Niederlande, ist jedoch nicht enthalten, die Provinzen (mit Farben und Rahmen).

Bekomme ich die folgende Fehlermeldung:

Uncaught TypeError: Cannot read property 'Typ' undefined topojson.js:187

Dies ist Zeile 186 und 187:

Funktion der geometrie(o) {

var t = o.Art, g = t === "GeometryCollection" ? {type: t, - Geometrien: o.Geometrien.Karte(geometrie)}

InformationsquelleAutor csnake | 2013-03-19
  1. 5

    Wie es aussieht, die Sie verweisen, ein Objekt, das nicht existiert in der Topologie.

    Ist es möglich, Ihr TopoJSON-Datei verwendet die englische Schreibweise von "Provinzen" (statt der niederländischen "provincies"? Wenn ja, dann nl.objects.provincies wäre null, und Sie würden entweder müssen Sie in nl.objects.provinces in Ihren code ein, oder Bearbeiten Sie die TopoJSON-Datei zu verwenden, die Niederländische Schreibweise "provincies" statt.

    Können Sie nach dem Inhalt des nl.json-so können wir einen Blick (z.B. auf dropbox)?

    • Danke für die Antwort mbostock. Ich habe gerade herausgefunden, dass es ein problem mit der nl.json-Datei und das Problem gelöst.
    • Das ist lustig. Ich versuche zu zeigen, TopoJSON-Datei für Gelderland (Provinz in Der Niederlande), aber möglicherweise gibt es ein problem, dass die Datei als gut. Was war das problem in Ihrem nl.json Datei, @csnake?
    InformationsquelleAutor mbostock
Schreibe einen Kommentar