2017-03-16 20 views
2

Dies wurde zwar schon einmal gefragt, aber ich hoffe, dass ich eine spezifische Antwort auf das Problem erhalte, das mir begegnet. Ich bin neu in d3 und ich versuche, einen lat/long für jetzt zu planen (ich werde den Rest machen, wenn ich mit dem ersten erfolgreich bin). Schätzen Sie die Hilfe der Experten. Vielen Dank.Uncaught TypeError: Kann die Eigenschaft 'albersUsa' von undefined nicht lesen

Der Versuch, eine Zellsite in einem bestimmten Bereich zu zeichnen.

Hier ist der Code:

<head> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script src="d3.min.js"></script> 
    <script src="http://d3js.org/topojson.v1.min.js"></script> 
    <script src="datamaps.usa.min.js"></script> 

<style> 
    #map { 
    height: 550px; 
    width: 100%; 
} 
</style> 

</head> 

<body> 
<div id="map"></div> 
<script> 
    var map = new google.maps.Map(d3.select("#map").node(), { 
     zoom: 8, 
     center: new google.maps.LatLng(32.7830600, -96.8066700), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    styles: [{ 
    "stylers": [{ 
     "saturation": -75 
    }, { 
     "lightness": 10 
    }] 
    }] 
}); 


var places = [ 
    { 
    name: "Site1", 
    location: { 
    latitude: 32.7935, 
    longitude: -97.9619 
    } 
} 
] 

var projection = d3.geo.albersUsa(); 


// add circles to svg 
svg.selectAll("circle") 
    .data(places) 
    .enter().append("circle", "circle") 
    .attr("r", 5) 
    .attr("transform", function(d) {return "translate(" + projection([ 
     d.location.longitude, d.location.latitude ]) + ")"; 
    }); 



    </script> 
</body> 

</html> 
+0

Welche Version von d3 verwenden Sie? –

+0

Das sehen Sie in d3.min.js - https://d3js.org Version 4.7.3. Copyright 2017 Mike Bostock. – DP8

Antwort

3

D3 v4 den Namensraum von D3v3 geändert, statt d3.geo.projection Sie d3.geoProjection verwenden:

d3.geo.albersUsa ->d3.geoAlbersUsa

d3.geo.albers ->

et c.

So wird d3.geo in v4 undefiniert sein, und seine Eigenschaft .albersUsa wird nicht gefunden und ein Fehler generiert.

Ich bin nicht sicher, ob Datamaps für d3v4-Kompatibilität aktualisiert wurde oder welche Konflikte aus Inkompatibilitäten entstehen könnten. Es kann sein, dass es einfacher ist, auf d3v3 herunterzustufen.

+0

@AndrewReid, danke. Es hat funktioniert. Hatte das gleiche Problem mit d3.geo.path und schrieb es einfach als d3.geoPath – DP8

Verwandte Themen