SVG中新重用路径元素的位置相对于原始元素

Question

我是svg和d3的新手。我正在使用topojson绘制州和国家，我想重用它们并定位它们。我正在使用＆＃34; def＆＃34;和＆＃34;使用＆＃34;标签但是当我给＆＃34;使用＆＃34;而不是局部坐标系时，它只是相对地转换路径。

JSFiddle - http://jsfiddle.net/kaushal793/byaka4yL/

是否有其他方法可以在本地坐标上的特定x，y位置定位路径？

 var states={};

    var final_input=[];

    var width = 960,
        height = 500;

    var main_margin = {top: 20, right: 190, bottom: 100, left: 60};

    var path = d3.geo.path();

    var projection = path.projection();

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

    var main = svg.append("def").append("g")
              .attr("id","expanding g");

    d3.json("topo/india-states.json", function(error, us) {

        us.objects.asasas.geometries.forEach(function(d){
          states[d.properties.HASC_1.split("IN.")[1]]=true;
        })
      var tf = us.transform;
        console.log(tf);





      /*var labScale = d3.scale.linear()
          .range([65,150]).domain([minRank,maxRank]);
          */

      var scale=d3.scale.linear().range([800,3000]);
      var featureCollection = topojson.feature(us, us.objects.asasas);
      var bounds = d3.geo.bounds(featureCollection);


        var labScale = d3.scale.linear().range([100,0]).domain([min,max]);


      featureCollection.features.forEach(function(d){
        if(states[d.properties.HASC_1.split("IN.")[1]] == true){
          final_input.push(d);
        }
      });

      var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
          centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;

      var projection = d3.geo.mercator()
        .scale(800)
        .center([centerX, centerY]);

        var    kx = tf.scale[0],
            ky = tf.scale[1],
            dx = tf.translate[0],
            dy = tf.translate[1];

            console.log(kx+"  "+ky+"  "+dx+"  "+dy);

        path.projection(projection);

        console.log(featureCollection.features);

      var zoom = d3.behavior.zoom()
          .translate(projection.translate())
          .scaleExtent([height, Infinity])
          .scale(projection.scale())
          .on("zoom", function() {
              projection.translate(d3.event.translate).scale(d3.event.scale)
              main.selectAll("path.zoomable").attr("d", path);

              projection.translate(d3.event.translate).scale(d3.event.scale)
              main.selectAll("path").attr("d", path);    

            });

        main.selectAll("path")
      .data(final_input)
      .enter()
      .append("g")
      .attr("id",function(d){
        return "g_" +d.properties.HASC_1.split("IN.")[1];
      })
      .append("path")
      .attr("d", path)
      .attr("id", function(d){
        return d.properties.HASC_1.split("IN.")[1];
      })
      .style("fill",function(d){
          //return d3.lab(labScale(d.properties.ve)*1.5,0,-100)
          return "lightblue";
      })
      .on("mouseover",function(){
        d3.select(this).style("stroke-width",2);
        d3.select(this).append("title").text(function(d){
          return "State:"+d.properties.HASC_1});
      })
      .on("mouseout",function(){
        d3.select(this).style("stroke-width",0.25+"px");
      });



       var use = svg.append("use")
              .attr("x",0)
              .attr("y",0)
              .attr("xlink:href","#g_GJ");
    });