问题
So I started with a really small example that is working well. I used QGIS to draw a line and then converted it to topojson with mapshaper. Then I use D3.js to load and visualize it. This is the bigger but not working example:
jsfiddle.net/kwoxer/kpL1uyy2/2/
As you can see it not showing just one line, it is showing crazy lines as if the convert gone wrong. Already tested different browsers.
But as I said I already did a small line before with QGIS, converted it, and everything was fine. So is this an issue of the size of the line? Or by the converter?
Here a picture from QGIS how it should like in the browser: http://i.imgur.com/s1FPn2P.png
So what is a good way to create an (huge) own map and using it in D3.js?
回答1:
I looked at your Fiddle, and I think I see the problem. You are using d3's Equirectangular map projection, which expects lat-long coordinates with x values in the range [-180, 180] and y values in the range [-90, 90]. The actual x and y ranges of your dataset are [-991.4407052281722, 6787.6906928973385] and [-4789.571699454693, -155.32649155239142]. When d3 encounters coordinates outside the expected range, it wraps them -- this is why the lines look "crazy."
Based on your coordinate values, I'm guessing that you're using a projected coordinate system in your QGIS project. To display the data using d3, you can either export your shapes in lat-long coordinates (e.g. by selecting "WGS 84" as the CRS when saving a QGIS layer), or you can use d3 with projected data (see Drawing already projected geoJSON map in d3.js)
来源：https://stackoverflow.com/questions/28075867/qgis-generated-shapefile-malformed-when-converted-to-topojson-by-mapshaper