Grouping SVG elements in D3
Question
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
1 answers
solution1
1 ACCPTED 2017-11-28 17:40:16
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Appending SVG Elements in D3
Deleting d3 svg elements for redraw
How to switch position of D3 SVG elements
D3 Code Is Creating 2 SVG elements in the div
Bring elements to front in d3/svg
Cannot color svg elements in D3
Changing SVG elements using d3
D3 styling SVG elements when defined
Not able to remove all D3 SVG elements
D3 Selecting SVG Text Elements
Related Tags