[Solved]-Drawing map with d3js from openstreetmap geojson-d3.js

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.