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

工作碼here

希望這有助於！