Wie bekomme ich eine Topojson-Schicht, die mit d3 in der Broschüre erscheint?

Ich habe in den letzten zwei Tagen versucht, eine sehr einfache Karte auf Leaflet zu machen und stoße an eine Wand.Wie bekomme ich eine Topojson-Schicht, die mit d3 in der Broschüre erscheint?

Ich habe eine topoJSON-Datei mit zwei Schichten aus früheren geoJSON-Dateien: US-Postleitzahlen für 5 Staaten und die Polygone der 5 Staaten.

Ich möchte diese auf Leaflet anzeigen und es ist wichtig, topoJSON anstelle von geoJSON wegen der kleineren Dateigröße mit der Postleitzahl Ebene zu verwenden.

Das Problem ist, ich kann nicht für das Leben von mir bekommen auch die kleineren Zustände Schicht in meiner topoJSON-Datei auf der Karte anzuzeigen. Ich habe mir viele Beispiele im Web angeschaut und folgte Mike Bostocks Beispiel: https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/leaflet/index.html#L131-171.

Ich kann die Datei in einem Webbrowser mit nur d3 anzeigen, so dass die Datei in Ordnung ist. Ich verwende v1 von topoJSON zusammen mit der Methode topojson.feature im Skript. Der Code ist unten. Ich kann die topoJSON-Datei nicht zur Verfügung stellen, aber ich gehe davon aus, dass es in Ordnung ist, weil ich es vorher mit d3 benutzt habe. Wenn jemand etwas mit dem Drehbuch entdecken könnte, wäre das großartig.

Danke.

 <!DOCTYPE html> 
<meta charset="utf-8"> 
<head> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script> 
<script src="http://d3js.org/topojson.v1.min.js"></script> 
<title>Gulf Zip Codes</title> 
</head> 

<div id="map"></div> 
<style type="text/css"> 
#map { 
    height: 800px; 
} 

path { 
    fill: #000; 
    fill-opacity: .1; 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

path:hover { 
    fill: #1f77b4; 
    fill-opacity: .4; 
} 


</style> 
<body> 

<script> 

var map = L.map('map').setView([32.546813, -88.374023], 6); 

L.tileLayer('http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{z}/{x}/{y}.png', { 

attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 

var svg = d3.select(map.getPanes().overlayPane).append("svg"), 
    g = svg.append("g").attr("class", "leaflet-zoom-hide"); 

d3.json("states_and_codes.json", function(error, states_and_codes) { 

    var bounds = d3.geo.bounds(states_and_codes); 
    path = d3.geo.path().projection(project); 

    var feature = g.selectAll("path") 
     .data(topojson.feature(states_and_codes,  states_and_codes.objects.claim_states).features) 
    .enter().append("path") 
    .attr("class", "path") 
    .attr("d",path); 

    map.on("viewreset", reset); 
    reset(); 

    // Reposition the SVG to cover the features. 
    function reset() { 
    var bottomLeft = project(bounds[0]), 
     topRight = project(bounds[1]); 

    svg .attr("width", topRight[0] - bottomLeft[0]) 
     .attr("height", bottomLeft[1] - topRight[1]) 
     .style("margin-left", bottomLeft[0] + "px") 
     .style("margin-top", topRight[1] + "px"); 

    g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")"); 

    feature.attr("d", path); 
    } 

    // Use Leaflet to implement a D3 geographic projection. 
    function project(x) { 
    var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0])); 
    return [point.x, point.y]; 
    } 

}); 



</script> 
</body>

Quelle

2013-07-15 antarctica77

Haben Sie die Ausgabe des Aufrufs 'topojson.feature()' überprüft? Sieht es richtig aus? Sind Sie sicher, dass der Schlüssel 'claim_states' korrekt und verfügbar ist? – nrabinowitz

Falls Sie noch suchen, oder für andere da draußen, sollte dies die fehlenden Teile von TopoJson sein;

var bounds = d3.geo.bounds(topojson.feature(states_and_codes, states_and_codes.objects.claim_states));

Sie auch here viele gute TopoJson Blocks von der Quelle finden!

Quelle

2013-07-31 10:08:30 fitzpaddy

Ich legte ein [vollständiges Beispiel mit Beispieldaten] (https://gist.github.com/edouard-lopez/10694800) auf Github. Wenn der JSON nicht geladen wird, versuchen Sie es mit der rohen Version ('<>' Symbol) –

danke! Ich habe eine Stunde lang nach dem richtigen Weg gesucht! – Sleenee

Wie bekomme ich eine Topojson-Schicht, die mit d3 in der Broschüre erscheint?

Antwort

Verwandte Themen