score:2

It seems that there was an issue with your scale and center point. According to the d3-geo API, there is the method fitSize, which allows you to place easily on your projection inside a container.

Here is a snippet with (data is hardcoded inside it) :

var data ={  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

  
var width = 960,
height = 500;

var projection = d3.geoEquirectangular().fitSize([width, height], data); // adding fitSize method instead of center and scale.


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geoPath()
    .projection(projection);

var g = svg.append("g");

    g.selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("d", path)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>


Related Query

More Query from same tag