Javascript 在d3.js中将对象从一个区域移动到另一个区域

目前，我有一张topojson格式的地图，我希望有一个对象从a点移动到B点。在这张地图上有一些部门和市政当局。现在，在两个分离点之间，我只想移动一个元素，它可以是一个圆，例如从点a到点B，生成一个过渡

在附上的图像结构和我想要实现的一个例子。例如，我希望从“ANTIOQUIA”元素移动到“BOYACA”。如果我能从部门的质心转到B部门的质心那就太好了。我怎样才能做到这一点

    var width = 900,
        height = 900;

    var div = d3.select("body").append("div")   
      .attr("class", "tooltip")             
      .style("opacity", 0);

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

    d3.json("https://cdn.rawgit.com/finiterank/mapa-colombia-js/9ae3e4e6/colombia-municipios.json", function(error, co) {
      console.log(co)
      var subunits = topojson.feature(co, co.objects.mpios);
      var projection = d3.geo.mercator()
        .scale(2000)
        .translate([width / 2, height / 2])
        .center([-61,43])
        .rotate([2,3,2]);

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




    var zoom = d3.behavior.zoom()
        .translate([0, 0])
        .scale(1)
        .scaleExtent([1, 8])
        .on("zoom", zoomed);


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

    svg
        .call(zoom) // delete this line to disable free zooming
        .call(zoom.event);

      g.append("path")
        .datum(subunits)
        .attr("d", path);

    function zoomed() {
        console.log("zoom")
      g.style("stroke-width", 1.5 / d3.event.scale + "px");
      g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

     //departments
      g.selectAll(".dpto")
        .data(topojson.feature(co, co.objects.depts).features)
        .enter().append("path")
        .attr("class", function(d) { return "depts " + "_" + d.id; })
        .attr("d", path)



     //municipalities
      g.selectAll(".mpio")
        .data(topojson.feature(co, co.objects.mpios).features)
        .enter().append("path")
        .on('mouseover', mouseoverMun )
        .on('mouseout',mouseoutMun)
        .attr("class", function(d) { return "mpio " + "_" + d.id + " " + d.properties.dpt})
        .attr("d", path)
    })

    function mouseoverMun(d){
      // Turn the department blue
      d3.selectAll("."+d.properties.dpt)
         .style("fill","steelblue")

      // Turn the municipality orange
      //d3.select(this).style("fill","orange");

      // Show a tooltip  
      div.style("opacity", .9)  
         .html(d.properties.name)   
         .style("left", (d3.event.pageX) + "px")        
         .style("top", (d3.event.pageY - 28) + "px"); 
         document.getElementById("department").innerHTML=d.properties.dpt

    }

    function mouseoutMun() {
      d3.selectAll(".mpio").style("fill","none");
      div.style("opacity",0);
      document.getElementById("department").innerHTML='';

    }

这就是我想做的。

---

有几种方法可以获得这些质心

在这个解决方案中，我有一个

质心

对象，它在实际绘制路径时填充：

var centroids = {};

g.selectAll(".dpto")
    //etc
    .attr("d", function(d) {
        if (d.properties.dpt === "ANTIOQUIA" || d.properties.dpt === "BOYACA") {
            centroids[d.properties.dpt] = path.centroid(d)
        }
        return path(d);
    });

然后，只需添加元素（这里是一个圆）并移动它：

var circle = svg.append("circle")
    .attr("fill", "blue")
    .attr("r", 4)
    .attr("cx", centroids.ANTIOQUIA[0])
    .attr("cy", centroids.ANTIOQUIA[1]);

circle.transition()
    .delay(1000)
    .duration(2000)
    .attr("cx", centroids.BOYACA[0])
    .attr("cy", centroids.BOYACA[1]);

---

这是更新后的提琴：

只是一个解释：你不想移动对象，你想移动一个元素。@GerardoFurtado是的！我将更新主题。@GerardoFurtado这就是我要做的。是的，我知道。顺便说一句，祝贺你的手绘！杰出的你让它看起来很简单！我真的很惊讶！。只是一个小细节利用你的知识，我试图给一个3d效果。我希望它从圆圈开始变小，变大，最后变小，直到消失。在这个例子中也是如此。我也希望曲线也出现。如果你想让我在一个单独的问题中回答，非常感谢你，你是个大师。