Skip to content Skip to sidebar Skip to footer
Home / D3.js / Dom / Javascript / Jquery / Svg

Animate Dom Movement Of Svg Groupings

Post a Comment
I have a d3 layout with 10 nodes structured as follows...

Solution 1:

This is a common algorithm to do that:

enter image description here

Here's the code:

<html><head><scriptsrc="d3.v3.min.js"></script><scriptsrc="jquery-2.1.0.min.js"></script><style>.svg_contariner {
    background-color:#CCCCCC;
}
#origin {
    width:200px;
    height:200px;
    margin:5px; 
}
#target {
    width:200px;
    height:200px;
    margin:5px; 
}
circle {
    fill:#e72;
}
text {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:10px;
}
.clone {
    margin:0;
    padding:0;
    width:20px;
    height:20px;
    position:absolute;
}
</style></head><body><divid="data"></div><script>var data_text = "", data = [], r = 10;
/* --- add some random data --- */for (i = 0; i < 10; i++) {
    data.push( {
        "x": Math.round(Math.random() * 180)+10,
        "y": Math.round(Math.random() * 180)+10,
        "text": i
    });  
    data_text += "x:" + data[i].x + " y:" + data[i].y + " text:" + data[i].text + "<br>";
}
/* --- create 2 containers --- */var svgContainerTar = d3.select("body").append("svg")
        .attr("id","target")
        .attr("class","svg_contariner");

var svgContainerOrg = d3.select("body").append("svg")
        .attr("id","origin")
        .attr("class","svg_contariner");

/* --- add g node to origin --- */var ele = svgContainerOrg.selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "node")
        .on("click", function (d) {     /* --- bind onClick to every g --- */
            d3.select(this).remove();   /* --- remove origin element --- */moveCircle(d);              /* --- create, animate ghost --- */
        });

/* --- add circle to g --- */var circles = ele.append("circle")
             .attr("cx", function (d) { return d.x; })
             .attr("cy", function (d) { return d.y; })
             .attr("r", r+"px");
/* --- add text to g --- */var labels = ele.append("text")
                .attr("dx", function(d) {return d.x - 2})
                .attr("dy", function(d) {return d.y + 3})
                .text(function (d) {return d.text});

functionmoveCircle(d) {
    ori_x = d.x;
    ori_y = d.y;
    ori_tex = d.text;
    ori_pos = $("#origin").position();
    tar_pos = $("#target").position();
    /* --- create ghost using jQuery --- */
    $("body").append("<div id='ghost' class='clone' style='left:"+(ori_x - r/2+ori_pos.left)+";top:"+(ori_y - r/2+ori_pos.top)+"';>"+
                        "<svg width='20px' height='20px'>"+
                            "<circle cx='"+r+"' cy='"+r+"' r='"+r+"px'></circle>"+
                            "<text x='"+(r - 2)+"' y='"+(r+3)+"'>"+ori_tex+"</text>"+
                        "</svg></div>");
    /* --- animate ghost --- */
    $("#ghost").animate({
        "left" : tar_pos.left + ori_x,
        "top" : tar_pos.top + ori_y
        },100,"swing",
            function () {
                time = setTimeout(function () {             /* --- when animation ends create target element --- */var new_node = d3.select("#target")
                                    .append ("g")
                                        .attr("class", "node");
                        new_node.append("circle")
                                .attr("cx", ori_x+r/2+"px")
                                .attr("cy", ori_y+r/2+"px")
                                .attr("r", r+"px")
                        new_node.append("text")
                                .attr("dx", ori_x+r/2-2)
                                .attr("dy", ori_y+r/2+3)
                                .text(ori_tex);
                    $("#ghost").remove();                   /* --- remove ghost --- */
                },100)
            });
}

</script></body></html>

Hope this help

You may like these posts

Post a Comment for "Animate Dom Movement Of Svg Groupings"