D3.js, SVG "g" element, and Data visualization project

Hi there.

I´m struggling to understand the SVG “g” element.

What I understand is that: is a SVG element to group other SVG elements. When I apply transformations, they are applied in its child as well.

Why do I need to append “g” when I display an axis? Is because every tick of the axis is its child and I´m using scaling, domain, range and transform functions on them?

Right now I´m with the Data Visualization with Scatterplot project. I´m wondering if the minute ticks are child of the Y axis and the year ticks are the childs of X axis. Are the circles childs of something?

I´m also trying to do the legend part and seems that I need to group this one as well but don´t understand why.

It’s just an element used to group some other elements. You can then apply attributes (size for example, or stroke width, or fill colour or whatever) to the whole group instead of having to apply them to every individual element.

You would use it on, say, an axis, because you want to a. apply attributes to the whole group at once rather than each element and b. apply position to the whole group at once (and each child can be positioned relative to that containing group) and c. allow everything in the axis’ group to be painlessly moved on top of the rest of the graph

As a comparison with another application of XML, HTML has the div element, which fulfils a very similar role

I see.

I’ve realized that when I remove <.append(“g”)> from axis X, the axis Y gets messed up. Ends up below X axis, completely separated. What is the reason behind that?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.