Verschieben eines Objekts von einer Region in eine andere in d3.js

Question

Derzeit habe ich eine Karte im Format topojson, ich möchte ein Objekt von Punkt A nach Punkt B bewegen. Auf dieser Karte gibt es Abteilungen und Gemeinden. Vorläufig zwischen zwei Abteilungen möchte ich nur ein Element bewegen, es kann ein Kreis sein, zum Beispiel von Punkt A zu Punkt B, der einen Übergang erzeugt.

Im beigefügten Bild der Struktur und ein Beispiel dafür, was ich erreichen will. Zum Beispiel möchte ich von "ANTIOQUIA" ein Element bis "BOYACA" bewegen. Es wäre großartig, wenn ich vom Schwerpunkt der Abteilung zum Schwerpunkt der Abteilung B gehen könnte. Wie kann ich das erreichen? Ich würde es auch schätzen, wenn Sie mir helfen können.

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=''; 

    } 

Dies ist, was ich versuche zu tun.

http://jsfiddle.net/0yLfzowy/

Answer 1

Es gibt mehrere Möglichkeiten, diese Schwerpunkte zu bekommen.

Bei dieser Lösung, ich habe ein centroids Objekt, das bevölkern, wenn Sie die Pfade zeichnen tatsächlich:

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); 
    }); 

Dann ist es nur eine Frage der das Element anhängt (hier ein Kreis), und es bewegt :

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]); 

Hier ist die aktualisierte Geige: http://jsfiddle.net/bzfs55bg/