score:5

Accepted answer

The first problem is with your data join:

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

This would mean you want one path element for each element in the json.coordinates array. Since your test data is a polygon, that would mean one path element for the exterior ring, and then perhaps multiple other path elements for any interior holes, if your data has them. I expect you just want a single path element for the entire polygon.

The second problem is that you’re not passing valid GeoJSON to the d3.geo.path instance. Because the data in your data join is json.coordinates, you’re just passing an array of coordinates directly to path, when you need to pass a GeoJSON geometry object or a feature. (See the GeoJSON specification.)

Fortunately both of these problems are easy to fix by eliminating the data join and rendering the full polygon. To add just one path element, just call selection.append:

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

Your projection will probably need adjusting (translate and scale), too. You might find the project to bounding box example useful here.

score:1

Do you really need to do it with D3?

I would suggest to go with more map oriented libraries like:

Leaflet vector layer has support for GeoJSON and its size is quite compact.

Open Layers is also an option but it's size is quite big.

Here is an example how I have used Leaflet + GeoJSON to display suburb shape http://www.geolocation.ws/s/6798/en


Related Query