From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Introducing groups

Introducing groups - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Introducing groups

- [Instructor] Earlier I mentioned that you can't add text to a rectangle or indeed any shape to any other shape in an SVG. This is the opposite of standard HTML where pretty much any element can go inside another. You can put a table in a div, you can put a div in a table. Now there are some exceptions to this, to be precise, one and a half exceptions. The half is that, as we've already seen, tspan elements can go inside a text element. The big exception is groups. You can add anything you like to a group including other groups. Now group elements don't show up on the web page themselves, you can't style them or put a board around them. They're conceptual really. But you can move them and rotate them which will move and rotate their contents, so they certainly have tangible effects. Groups allow you to join elements together, turn them all pink at the same time, or move them 50 pixels to the right at the same time. They also allow you to tidy up and organize elements in the DOM which…

Contents