D3 and the SVG Group Element
  Duration: 11:24
Part of Course: Introductory D3 Course
This Lesson is for subscribers

D3-and-the-svg-group-element_280x158
Unlock this lesson NOW!
  • Get expert advice on D3 and the SVG Group Element
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • The SVG Group Element is used to group SVG Elements together (much like a container)
  • There are two main reasons to use the SVG Group Element - for grouping SVG Elements and for doing transformations to the coordinate space the SVG Elements are in
  • The most common SVG Group element transformation in D3 is the Translate Transformation
  • The SVG Group Element Translate transformation allows you to move all of the elements inside of the <g> ... </g> a certain numbers of units in the X direction and a certain number of units in the Y direction
  • At a deeper level, what the SVG Group Element transform is doing is transforming the SVG Coordinate Space
  • You can append an SVG Group element just like any other HTML / SVG DOM element
  • If you create a selection whose parent node is the SVG Group Element, then every element you append to that selection will live within the SVG Group Element
  • Because you can define / update the attribute value pairs of DOM elements, you can use D3 to define and update the SVG Group Element transform translate attribute value pair

This Transcript is for subscribers.

D3-and-the-svg-group-element_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on D3 and the SVG Group Element
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index