D3: el map con topojson no se procesa correctamente

Estoy tratando de dibujar svg map con d3 desde el file topojson, pero todo lo que tengo es líneas desorderadas.

Estoy usando la mayor parte del código que encontré en http://www.tnoda.com/blog/2013-12-07 . Cuando uso files topojson de ese sitio, todo funciona bien. Pensé que tal vez el problema está en mi file topojson, pero cuando lo importo en mapshaper, obtengo un map normal.

plnkr: http://plnkr.co/edit/TYiT5AoI29nEHC3Fre6D?p=preview

Aquí está mi código:

index.html

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <script src="//code.jquery.com/jquery-2.0.0.js"></script> <script src="//d3js.org/d3.v3.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> </head> <body> <div id="map"></div> <script src="script.js"></script> </body> </html> 

script.js

 var m_width = $("#map").width(), width = 800, height = 500 var projection = d3.geo.mercator() .scale(105) .translate([width / 2, height / 1.5]); var path = d3.geo.path() .projection(projection); var svg = d3.select("#map").append("svg") .attr("width", m_width) .attr("height", m_width * height / width); var g = svg.append("g"); d3.json("zupanije.max.topo.json", function(error, us) { g.append("g") .attr("id", "states") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .enter() .append("path") .attr("id", function(d) { return d.id; }) .attr("d", path) }); 

styles.css

 #map { background-color: #fff; border: 1px solid #ccc; } .background { fill: none; pointer-events: all; } #states{ cursor: pointer; fill: #cde; stroke: #fff; stroke-linejoin: round; stroke-linecap: round; } #states .active { fill: #89a; } pre.prettyprint { border: 1px solid #ccc; margin-bottom: 0; padding: 9.5px; } 

One Solution collect form web for “D3: el map con topojson no se procesa correctamente”

Estaba teniendo exactamente el mismo problema y pasé horas reconvirtiendo mi file SHP en GeoJSON / Topojson en la command-line con diferentes configuraciones. ¡La solución es bastante simple! – Obtenga QGIS aquí: https://www.qgis.org/en/site/forusers/download.html – abra su file SHP o su file GeoJSON – Seleccione la capa que desea exportar – Vaya a Capa> Guardar como – Formato: Geojson – CSR: WGS 84, EPSG: 4326 – Guardar.

¡Disfrutar!

  • D3.js Flood Map Killer
  • Cómo controlar el order de las capas en un map en d3js
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.