CODEWITHSUNDEEP
javascriptd3.jstransition
Kal
Kal

Reputation: 323

D3.js transition inside of transformation

I have some lines and I am moving them as a group. Is it possible to move them individually while that transformation is happening?

I made a small example with a stick man to show the case. He is supposed to move an arm while he is moving right. But the arm stays back.

http://jsfiddle.net/zre5ckk5/

var mode = "Transition";
        var bodySelection = d3.select("body");
        var divButton = bodySelection.append("div");
        var button = divButton.append("button")
            .attr("id","button")
            .text(mode);
        var svg = bodySelection.append("svg")
            .attr("width",800)
            .attr("height",600)
            .style("fill","red");   


        var chest = svg.append("line")
            .attr("x1",100)
            .attr("y1",100)
            .attr("x2",100)
            .attr("y2",50)
            .attr("stroke-width", 2)
            .attr("stroke", "black");       

        var legL = svg.append("line")
            .attr("x1",100)
            .attr("y1",100)
            .attr("x2",80)
            .attr("y2",130)
            .attr("stroke-width", 2)
            .attr("stroke", "black");

        var legR = svg.append("line")
            .attr("x1",100)
            .attr("y1",100)
            .attr("x2",120)
            .attr("y2",130)
            .attr("stroke-width", 2)
            .attr("stroke", "black");       

        var head = svg.append("circle")
            .attr("cx",100)
            .attr("cy",35)
            .attr("r",15)
            .attr("fill","black");

        var armL = svg.append("line")
            .attr("x1",100)
            .attr("y1",60)
            .attr("x2",80)
            .attr("y2",75)
            .attr("stroke-width", 2)
            .attr("stroke", "black")
            .on('click', function(){
        console.log('polyline click');
        console.log(this.getAttribute('x2'));            
  });       

        var armR = svg.append("line")
            .attr("x1",100)
            .attr("y1",60)
            .attr("x2",120)
            .attr("y2",75)
            .attr("stroke-width", 2)
            .attr("stroke", "black");

        var body = svg.selectAll("line,circle");


    button.on("click", function() {
        if(mode=="Transition")
        {
            moveBody(200);
            moveArmL();         
            mode="Reset";
        }
        else if(mode=="Reset")
        {
            moveBody(0);
            mode="Transition";
        }
        button.text(mode);
    })  

    function moveBody(x)
    {
        body.transition()
             .attr("transform", "translate(" + x + ",0)")
             .duration(1000);           
    }

    function moveArmL()
    {
        armL.transition()

             .attr("x2",90)
             .duration(500)
             .transition()
             .attr("x2",80)
             .duration(500);
    }

Upvotes: 1

Views: 550

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

To move the whole body elements together first add a group to the svg like below:

var svg = bodySelection.append("svg")
            .attr("width",800)
            .attr("height",600)
            .style("fill","red").append("g");

Now move the whole group 

function moveBody(x)
    {
        svg.transition()
             .attr("transform", "translate(" + x + ",0)")
             .duration(1000);           
    }

Working code here

Hope this helps!

Upvotes: 2

Related Questions