D3.js 转换内部转换

Question

我有一些线条，我正在将它们作为一个整体移动。是否可以在进行转换时单独移动它们？

我用火柴人做了个小例子来说明一下。他应该在向右移动时移动手臂。但是胳膊还是留了下来。

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

要将整个 body 个元素移动到一起，请先向 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

希望对您有所帮助！

D3.js 转换内部转换

D3.js transition inside of transformation

javascript

transitions

d3.js