перекрытие геотропы после масштабирования D3.js

Это геоджсон, который я использую

Мой код

var width = d3.round($('.map-container').width());
var height =d3.round($(window).height()); 
var svg = d3.select("#india")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
//using geojson file mentioned above just name and extension changed
d3.json("/Scripts/in-states.js", function (json) {
    var center = d3.geo.centroid(json)
    var scale = 1000;
    var offset = [width / 2, height / 2];
    var projection = d3.geo.mercator()
                           .scale(scale)
                           .center(center)
                           .translate(offset);


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

      svg.selectAll("path")
                .data(json.features)
                .enter()
                .append("path")
                .attr("class", function (d) {
                    return "state " + d.properties.name;
                })
                .attr("stroke-width", "0.2em")
                .attr("fill",'#045A8D')
                .attr("d", path);
    });

Теперь, когда это получает визуализацию, функция, где name='Lakshadweep', покрывает всю карту.

вот пример!

Я не мог понять, почему это происходит? потому что вышеупомянутый geojson работает так, как ожидалось. Имеет ли значение в этом случае последовательность путей (состояний)? (я новичок в svg и d3)