D3.js变换内的过渡

Question

我有一些线条，我要把它们作为一个整体来移动。在这种转变发生的时候，有可能单独移动它们吗？

我用一个棍棒人做了一个小例子来展示这个例子。当他向右移动时，他应该动一只手臂。但手臂保持向后。

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

Answer 1

要将整个主体元素一起移动，首先向svg添加一个组，如下所示：

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

现在移动整个小组

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

工作代码这里

希望这能有所帮助！