d3.js geo - rendering svg path -


i'd create choropleth map of czech republic. inspired article http://bl.ocks.org/mbostock/4060606, have created this
http://jsfiddle.net/1duds8tz/2/

var width = 960; var height = 500;  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); var offset = [width / 2, height / 2];  var projection = d3.geo.mercator().scale(6000).center([15.474, 49.822]).translate(offset); var path = d3.geo.path().projection(projection);  queue().defer(d3.json, "..map.geojson").await(ready);  function ready(error, reg) {     var group = svg.selectall("g").data(reg.features).enter().append("g");     group.append("path").attr("d", path).attr("fill", "none").attr("stroke", "#222"); } 

when tried fill svg path color, ended on this
http://jsfiddle.net/1duds8tz/3/

        group.append("path").attr("d", path).attr("fill", "red").attr("stroke", "#222"); 

there odd values in path d attribute. geojson data must somehow faulty can't figure wrong.

everything looks right here: https://gist.github.com/anonymous/4e51227dd83be8c2311d

your geojson corrupted , result polygons being drawn interiors of infinitely bounded polygon. that's why when attempt give fill path, goes beyond extent of screen still displays border fine. tried reverse winding order of coordinates array, , seemed fix of them except "brno-venkov", might source of problems (especially given administrative shape).

i'd suggest going created original geojson , try re-export simplification. if want reverse coordinates on geojson correct winding order, that's pretty simple:

 geodata = d3.selectall("path").data();  (x in geodata) {geodata[x].geometry.coordinates[0] = geodata[x].geometry.coordinates[0].reverse()} 

but won't fix problem polygon, nor not reversing coordinates.


Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -