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!

  • Cómo controlar el order de las capas en un map en d3js
  • Cómo eliminar una label de folleto cuando se elimina una capa topográfica que la contiene
  • Agregar información sobre herramientas en el map d3.js
  • Cómo mantener la proyección ortográfica d3 cinput al hacer zoom
  • Representando solo una porción de un map topojson usando D3.js
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.