CODEWITHSUNDEEP
javascriptd3.jssvg
Kam
Kam

Reputation: 44

Grouping SVG elements in D3

I've implemented a car into my D3. Info graphic. However; It's quite large in my container and it's not animated. I'd like to group these elements then, scale it down, & finally animate it to move in a loop or continuously. Basically make the car much smaller, where it could animate around the page freely.

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

Upvotes: 0

Views: 82

Answers (1)

Lary Ciminera
Lary Ciminera

Reputation: 1270

here you go : i put your car in a svg group and changed your code a bit, at the end i made your car move you can also add all kind of transformation to the car element like so: 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>

Upvotes: 1

Related Questions