D3.js: what is 'g' in .append("g") D3.js code?

I am new to D3.js, started learning today only

I looked the the donut example and found this code

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

I searched for documentation, but did not understood what .append("g") is appending

Is it even D3 specific?

Looking for guidance here

Solution 1:

It appends a 'g' element to the SVG. g element is used to group SVG shapes together, so no it's not d3 specific.

Solution 2:

I came here from a d3 learning curve as well. As already pointed out this is not specific to d3, it is specific to svg attributes. Here is a really good tutorial explaining the advantages of svg:g (grouping).

It is not that different from the use case of "grouping" in graphical drawings such as ones you would do in a powerpoint presentation.

http://tutorials.jenkov.com/svg/g-element.html

As pointed in above link: to translate you need to use translate(x,y):

The <g>-element doesn't have x and y attributes. To move the contents of a <g>-element you can only do so using the transform attribute, using the "translate" function, like this: transform="translate(x,y)".