仅放大该国家/地区的特定州

Question

我想创建一个d3地图，每当我点击一个状态然后该特定状态应该放大而留下其他状态，当我再次点击该特定状态然后它缩小并成为该国的一部分这是我在印度的地图上实现它的名字是india.geojson 这是我的代码 -

        var centered;
        var canvas= d3.select("body").append("svg")
                .attr("width", 1000)
                .attr("height", 1000)
                .attr("fill", "yellow");
var i;
for( i=0;i<5000;i++){               
        d3.json("india.geojson", function(data){

                    var tip = d3.tip()
                        .attr('class', 'd3-tip')
                        .offset([-10, 0])
                        .html(function(d) {
                            return ("State :"+d.properties.NAME_1);
                        });

                    canvas.call(tip);

                    var color = d3.scale.linear()
                                .domain([1,50])
                                .range(["red","blue"]);

                    var group=canvas.selectAll("g")
                        .data(data.features)
                        .enter()
                        .append("g")
                        .on('mouseover', tip.show)
                        .on('mouseout', tip.hide)

                    var projection = d3.geo.mercator().scale(1000).translate([-1000,700]);

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

                    var areas= group.append("path")
                            .attr("d", path)
                            .attr("class", "area")
                            .on("click",clicked)
                            .attr("fill",function(d){return color(d.properties.ID_1) ;});


            function clicked(d) {
                  var x, y, k,p;

                if(d.properties.ID_1 == 29){
                            //--------------------------------

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

                            d3.json("Rajasthan.geojson", function(data){
                                            var tip = d3.tip()
                                            .attr('class', 'd3-tip')
                                            .offset([-10, 0])
                                            .html(function(d) {
                                                return ("State :"+d.properties.NAME_1);
                                             });

                                            canvas.call(tip);

                                    //var color = d3.scale.linear()
                                        //      .domain([1,50])
                                            //  .range(["red","blue"]);

                                            var group1=canvas.selectAll("g")
                                                .data(data.features)
                                                .enter()
                                                .append("g")
                                                .on('mouseover', tip.show)
                                                .on('mouseout', tip.hide);

                                            var projection1 = d3.geo.mercator().scale(1000).translate([-1000,700]);

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

                                            var areas1= group1.append("path")
                                                    .attr("d", path)
                                                    .attr("class", "area")
                                                    .on("click",clicked)
                                                    .attr("fill",function(d){return color(d.properties.ID_1) ;});

                                            if (d && centered !== d) {
                                                    var centroid = path.centroid(d);
                                                    x = centroid[0];
                                                    y = centroid[1];
                                                    k = 4;
                                                    centered = d;

                                            } 
                                            else {
                                                    x = 500/ 2;
                                                    y = 500 / 2;
                                                    k = 1;
                                                    centered = null;
                                                    p=1;
                                            }

                                            group1.selectAll("path")
                                                .classed("active", centered && function(d) { return d === centered; });

                                            group1.transition()
                                                    .duration(50)
                                                    .attr("transform", "translate(" + 500/ 2 + "," + 500 / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
                                                    .style("stroke-width", 3.5 / k + "px");         
                                if(p==1)
                                        continue;

                            //--------------------------------------
                            });                                       
                }}}

}）;