d3.js - Drawing map with d3js from openstreetmap geojson -

hy

i'm trying draw svg d3.v3.js geojson. fetch geojson openstreetmap(my test data: http://pastebin.com/4gqne42i) , try render svg.

my js code:

var path, vis, xy, jdata;      xy = d3.geo.mercator().translate([0, 0]).scale(200);      path = d3.geo.path().projection(xy);      vis = d3.select("body").append("svg").attr("width", 960).attr("height", 600);      //22.json name of file contains geojson data     d3.json("22.json", function(error, json) {        jdata = json;       if(error!=null)     console.log(error);       return vis.append("svg:g")           .selectall("path")           .data(json.coordinates)           .enter().append("path")           .attr("d", path);     }); 

and somehow svg result this:

<svg width="960" height="600">  <g>   <path></path>  </g> </svg> 

i know projection not good, think svg should have nodes.

what problem code? post correct solution?

the first problem data join:

vis.append("g")   .selectall("path")     .data(json.coordinates)   .enter().append("path")     .attr("d", path); 

this mean want 1 path element each element in json.coordinates array. since test data polygon, mean 1 path element exterior ring, , perhaps multiple other path elements interior holes, if data has them. expect want single path element entire polygon.

the second problem you’re not passing valid geojson d3.geo.path instance. because data in data join json.coordinates, you’re passing array of coordinates directly path, when need pass geojson geometry object or feature. (see geojson specification.)

fortunately both of these problems easy fix eliminating data join , rendering full polygon. add 1 path element, call selection.append:

vis.append("path")     .datum(json)     .attr("d", path); 

your projection need adjusting (translate , scale), too. might find project bounding box example useful here.