SVG-Elemente in D3 gruppieren

Question

Ich habe ein Auto in meine D3 eingebaut. Infografik. Jedoch; Es ist ziemlich groß in meinem Behälter und es ist nicht animiert. Ich würde gerne diese Elemente gruppieren, dann verkleinern, & schließlich animieren, um es in einer Schleife oder kontinuierlich zu bewegen. Grundsätzlich wird das Auto viel kleiner, wo es frei um die Seite animieren könnte.

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 

Answer 1

hier gehen Sie: i setzen Sie Ihr Auto in einer svg Gruppe und verändert den Code ein wenig, am Ende i Ihr Auto bewegen gemacht können Sie auch jede Art von Transformation auf das wie so Auto Element hinzufügen: https://developer.mozilla.org/fr/docs/Web/CSS/transform

<!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>