Javascript 在D3中对SVG元素进行分组

我已经在D3上安装了一辆车。信息图表。然而它在我的容器中相当大，而且没有动画。然后，我想将这些元素分组，缩小比例，最后设置动画，使其在循环中移动或连续移动。基本上，使汽车更小，它可以在页面周围自由地设置动画

d3.select('#dataVizContainer svg').append("rect")
    .attr('id', 'rect1')
    .attr("fill", "transparent")
    .attr("stroke", "#99C863")
    .style('stroke-width', '10px')
    .attr("width", 210)
    .attr("height", 130)
    .attr("opacity", 0)
    ;

d3.select('#rect1')
    .transition()
    .attr("x", 70)
    .attr("y", 10)
    .attr('rx', 150)
    .attr("fill", "transparent")

    .delay(2000)
    .duration(12000)
    .attr("opacity", 1);


d3.select('#dataVizContainer svg').append('line').attr('id', 'line')
    .attr('x1', 145).attr('y1', 10).attr('x2', 145).attr('y2', 80)
    .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0);
//Animation
d3.select('#line')
    .transition()
    .delay(2000)
    .duration(12000)
    .attr("opacity", 1);

d3.select('#dataVizContainer svg').append('line').attr('id', 'line2')
    .attr('x1', 215).attr('y1', 10).attr('x2', 215).attr('y2', 80)
    .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0);
//Animation
d3.select('#line2')
    .transition()
    .delay(2000)
    .duration(12000)
    .attr("opacity", 1);


d3.select('#dataVizContainer svg').append("rect")
    .attr('id', 'rect2')
    .attr("fill", "transparent")
    .attr("stroke", "#8C8C93")
    .style('stroke-width', '10px')
    .attr("width", 340)
    .attr("height", 80)
    .attr("opacity", 0)
    ;
d3.select('#rect2')
    .transition()
    .attr("x", 10)
    .attr("y", 70)
    .attr('rx', 30)
    .attr("fill", "#8C8C93")
    .delay(2000)
    .duration(8000)
    .attr("opacity", 1);

d3.select('#dataVizContainer svg').append("rect")
    .attr('id', 'rect3')
    .attr("fill", "transparent")
    .attr("stroke", "crimson")
    .style('stroke-width', '10px')
    .attr("width", 40)
    .attr("height", 20)
    .attr("opacity", 0)
    ;
d3.select('#rect3')
    .transition()
    .attr("x", 0)
    .attr("y", 110)
    .attr('rx', 10)
    .attr("fill", "#999")

    .delay(2000)
    .duration(12000)
    .attr("opacity", 1);

d3.select('#dataVizContainer svg').append("rect")
    .attr('id', 'rect4')
    .attr("fill", "transparent")
    .attr("stroke", "crimson")
    .style('stroke-width', '10px')
    .attr("width", 40)
    .attr("height", 20)
    .attr("opacity", 0)
    ;

//Draw the Rectangle
d3.select('#rect4')
    .transition()
    .attr("x", 325)
    .attr("y", 110)
    .attr('rx', 10)
    .attr("fill", "#999")

    .delay(2000)
    .duration(12000)
    .attr("opacity", 1);
// Left wheel 
d3.select('#dataVizContainer svg').append('circle')
    .attr('id', 'C14')
    .attr('cx', 90)
    .attr('cy', 140)
    .attr('r', 40)
    .style('stroke-width', '7px')
    .attr("opacity", 0)
    ;

d3.select('#C14')
    .transition()
    .attr("r", "40")
    .delay(4000)
    .ease(d3.easeBounce)
    .duration(12000)
    .attr("opacity", 1)
    .attr("fill", "#222")
    ;

// Rims of the Left Wheel 
d3.select('#dataVizContainer svg').append('circle')
    .attr('id', 'C15')
    .attr('cx', 90)
    .attr('cy', 140)
    .attr('r', 15)
    .attr("opacity", 0)
    ;

d3.select('#C15')
    .transition()
    .delay(7000)
    .ease(d3.easeBounce)
    .duration(12000)
    .attr("opacity", 1)
    .attr("fill", "#555")
    .attr("r", "15")

    ;

//Left Wheel Code Ended

//Right Wheel Started 
d3.select('#dataVizContainer svg').append('circle')
    .attr('id', 'C16')
    .attr('cx', 270)
    .attr('cy', 140)
    .attr('r', 40)
    .style('stroke-width', '7px')
    .attr("opacity", 0)
    ;

d3.select('#C16')
    .transition()
    .attr("r", "40")
    .delay(4000)
    .ease(d3.easeBounce)
    .duration(12000)
    .attr("opacity", 1)
    .attr("fill", "#222")
    ;

// Rims of the Right Wheel 
d3.select('#dataVizContainer svg').append('circle')
    .attr('id', 'C17')
    .attr('cx', 270)
    .attr('cy', 140)
    .attr('r', 15)
    .attr("opacity", 0)
    ;

d3.select('#C17')
    .transition()
    .delay(7000)
    .ease(d3.easeBounce)
    .duration(12000)
    .attr("opacity", 1)
    .attr("fill", "#555")
    .attr("r", "15")

    ;
//Right Wheel Code Ended

---

给你：我把你的车放在一个svg组中，对你的代码做了一点修改，最后我让你的车动了，你也可以给车元素添加各种变换，如下所示：

var car=d3。选择（'svg'）
.附加（“g”）；
car.append（“rect”）
.attr（'id'，'rect1'）
.attr（“填充”、“透明”）
.attr（“笔划”，“#99C863”）
.style（'stroke-width'，'10px'）
.attr（“宽度”，210）
.attr（“高度”，130）
.attr（“不透明度”，0）
;
d3.选择（“#rect1”）
.transition（）
.attr（“x”，70）
.attr（“y”，10）
.attr（'rx'，150）
.attr（“填充”、“透明”）
.延迟（2000年）
.持续时间（12000）
.attr（“不透明度”，1）；
car.append（'line'）.attr（'id'，'line'））
.attr（'x1'，145）.attr（'y1'，10）.attr（'x2'，145）.attr（'y2'，80）
.style（'stroke'，'#99C863'）。style（'stroke-width'，'10px'）。attr（'opacity'，0）；
//动画
d3.选择（“#行”）
.transition（）
.延迟（2000年）
.持续时间（12000）
.attr（“不透明度”，1）；
car.append（'line'）.attr（'id'，'line2'））
.attr（'x1'，215）.attr（'y1'，10）.attr（'x2'，215）.attr（'y2'，80）
.style（'stroke'，'#99C863'）。style（'stroke-width'，'10px'）。attr（'opacity'，0）；
//动画
d3.选择（“#第2行”）
.transition（）
.延迟（2000年）
.持续时间（12000）
.attr（“不透明度”，1）；
car.append（“rect”）
.attr（'id'，'rect2'）
.attr（“填充”、“透明”）
.attr（“笔划”，“#8C93”）
.style（'stroke-width'，'10px'）
.attr（“宽度”，340）
.attr（“高度”，80）
.attr（“不透明度”，0）
;
d3.选择（“#rect2”）
.transition（）
.attr（“x”，10）
.attr（“y”，70）
.attr（'rx'，30）
.attr（“填充”，“#8c93”）
.延迟（2000年）
.持续时间（8000）
.attr（“不透明度”，1）；
car.append（“rect”）
.attr（'id'，'rect3'）
.attr（“填充”、“透明”）
.attr（“笔划”、“深红色”）
.style（'stroke-width'，'10px'）
.attr（“宽度”，40）
.attr（“高度”，20）
.attr（“不透明度”，0）
;
d3.选择（“#rect3”）
.transition（）
.attr（“x”，0）
.attr（“y”，110）
.attr（'rx'，10）
.attr（“填充”、“999”）
.延迟（2000年）
.持续时间（12000）
.attr（“不透明度”，1）；
car.append（“rect”）
.attr（'id'，'rect4'）
.attr（“填充”、“透明”）
.attr（“笔划”、“深红色”）
.style（'stroke-width'，'10px'）
.attr（“宽度”，40）
.attr（“高度”，20）
.attr（“不透明度”，0）
;
//画矩形
d3.选择（“#rect4”）
.transition（）
.attr（“x”，325）
.attr（“y”，110）
.attr（'rx'，10）
.attr（“填充”、“999”）
.延迟（2000年）
.持续时间（12000）
.attr（“不透明度”，1）；
//左轮
car.append（'circle'））
.attr（'id'，'C14'）
.attr（'cx'，90）
.attr（'cy'，140）
.attr（'r'，40）
.style（'stroke-width'，'7px'）
.attr（“不透明度”，0）
;
d3.选择（“#C14”）
.transition（）
.attr（“r”、“40”）
.延迟（4000）
.轻松（d3.轻松反弹）
.持续时间（12000）
.attr（“不透明度”，1）
.attr（“填充”、“222”）
;
//左轮轮缘
car.append（'circle'））
.attr（'id'，'C15'）
.attr（'cx'，90）
.attr（'cy'，140）
.attr（'r'，15）
.attr（“不透明度”，0）
;
d3.选择（“#C15”）
.transition（）
.延迟（7000）
.轻松（d3.轻松反弹）
.持续时间（12000）
.attr（“不透明度”，1）
.attr（“填充”，“#555”）
.attr（“r”、“15”）
;
//左轮代码结束
//右轮启动
car.append（'circle'））
.attr（'id'，'C16'）
.attr（'cx'，270）
.attr（'cy'，140）
.attr（'r'，40）
.style（'stroke-width'，'7px'）
.attr（“不透明度”，0）
;
d3.选择（“#C16”）
.transition（）
.attr（“r”、“40”）
.延迟（4000）
.轻松（d3.轻松反弹）
.持续时间（12000）
.attr（“不透明度”，1）
.attr（“填充”、“222”）
;
//右车轮轮缘
car.append（'circle'））
.attr（'id'，'C17'）
.attr（'cx'，270）
.attr（'cy'，140）
.attr（'r'，15）
.attr（“不透明度”，0）
;
d3.选择（“#C17”）
.transition（）
.延迟（7000）
.轻松（d3.轻松反弹）
.持续时间（12000）
.attr（“不透明度”，1）
.attr（“填充”，“#555”）
.attr（“r”、“15”）
;
//在这里，我缩小了汽车的尺寸
car.attr（“变换”、“缩放（0.1）”）
//在这里我可以移动（在动画淡入后）
car.transition（）.延迟（12000）.持续时间（5000）.属性（“转换”，“缩放（0.1）转换（8000,0）”）
//右车轮代码结束

<!DOCTYPE html>
<meta charset="utf-8">

<body>

<!-- load the d3.js library -->
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js">
</script>
<div id="dataVizContainer">
    <svg height="1000" width="1000" ></svg>
</div>
<script>
    var car = d3.select('svg')
        .append("g");

    car.append("rect")
        .attr('id', 'rect1')
        .attr("fill", "transparent")
        .attr("stroke", "#99C863")
        .style('stroke-width', '10px')
        .attr("width", 210)
        .attr("height", 130)
        .attr("opacity", 0)
    ;

    d3.select('#rect1')
        .transition()
        .attr("x", 70)
        .attr("y", 10)
        .attr('rx', 150)
        .attr("fill", "transparent")

        .delay(2000)
        .duration(12000)
        .attr("opacity", 1);


    car.append('line').attr('id', 'line')
        .attr('x1', 145).attr('y1', 10).attr('x2', 145).attr('y2', 80)
        .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0);
    //Animation
    d3.select('#line')
        .transition()
        .delay(2000)
        .duration(12000)
        .attr("opacity", 1);

    car.append('line').attr('id', 'line2')
        .attr('x1', 215).attr('y1', 10).attr('x2', 215).attr('y2', 80)
        .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0);
    //Animation
    d3.select('#line2')
        .transition()
        .delay(2000)
        .duration(12000)
        .attr("opacity", 1);


    car.append("rect")
        .attr('id', 'rect2')
        .attr("fill", "transparent")
        .attr("stroke", "#8C8C93")
        .style('stroke-width', '10px')
        .attr("width", 340)
        .attr("height", 80)
        .attr("opacity", 0)
    ;
    d3.select('#rect2')
        .transition()
        .attr("x", 10)
        .attr("y", 70)
        .attr('rx', 30)
        .attr("fill", "#8C8C93")
        .delay(2000)
        .duration(8000)
        .attr("opacity", 1);

    car.append("rect")
        .attr('id', 'rect3')
        .attr("fill", "transparent")
        .attr("stroke", "crimson")
        .style('stroke-width', '10px')
        .attr("width", 40)
        .attr("height", 20)
        .attr("opacity", 0)
    ;
    d3.select('#rect3')
        .transition()
        .attr("x", 0)
        .attr("y", 110)
        .attr('rx', 10)
        .attr("fill", "#999")

        .delay(2000)
        .duration(12000)
        .attr("opacity", 1);

    car.append("rect")
        .attr('id', 'rect4')
        .attr("fill", "transparent")
        .attr("stroke", "crimson")
        .style('stroke-width', '10px')
        .attr("width", 40)
        .attr("height", 20)
        .attr("opacity", 0)
    ;

    //Draw the Rectangle
    d3.select('#rect4')
        .transition()
        .attr("x", 325)
        .attr("y", 110)
        .attr('rx', 10)
        .attr("fill", "#999")

        .delay(2000)
        .duration(12000)
        .attr("opacity", 1);
    // Left wheel
    car.append('circle')
        .attr('id', 'C14')
        .attr('cx', 90)
        .attr('cy', 140)
        .attr('r', 40)
        .style('stroke-width', '7px')
        .attr("opacity", 0)
    ;

    d3.select('#C14')
        .transition()
        .attr("r", "40")
        .delay(4000)
        .ease(d3.easeBounce)
        .duration(12000)
        .attr("opacity", 1)
        .attr("fill", "#222")
    ;

    // Rims of the Left Wheel
    car.append('circle')
        .attr('id', 'C15')
        .attr('cx', 90)
        .attr('cy', 140)
        .attr('r', 15)
        .attr("opacity", 0)
    ;

    d3.select('#C15')
        .transition()
        .delay(7000)
        .ease(d3.easeBounce)
        .duration(12000)
        .attr("opacity", 1)
        .attr("fill", "#555")
        .attr("r", "15")

    ;

    //Left Wheel Code Ended

    //Right Wheel Started
    car.append('circle')
        .attr('id', 'C16')
        .attr('cx', 270)
        .attr('cy', 140)
        .attr('r', 40)
        .style('stroke-width', '7px')
        .attr("opacity", 0)
    ;

    d3.select('#C16')
        .transition()
        .attr("r", "40")
        .delay(4000)
        .ease(d3.easeBounce)
        .duration(12000)
        .attr("opacity", 1)
        .attr("fill", "#222")
    ;

    // Rims of the Right Wheel
    car.append('circle')
        .attr('id', 'C17')
        .attr('cx', 270)
        .attr('cy', 140)
        .attr('r', 15)
        .attr("opacity", 0)
    ;

    d3.select('#C17')
        .transition()
        .delay(7000)
        .ease(d3.easeBounce)
        .duration(12000)
        .attr("opacity", 1)
        .attr("fill", "#555")
        .attr("r", "15")

    ;
   //here i scale down the car
    car.attr("transform", "scale(0.1)")
   //here i mak eit move (after your fade in animation)
    car.transition().delay(12000).duration(5000).attr("transform", "scale(0.1) translate(8000,0)")

    //Right Wheel Code Ended
</script>
</body>