adding padding to svg g element

css, d3.js, html, javascript, svg

Solution

The `<g>` element doesn't really render at all, it's the `<path>` and `<text>` elements you need to adjust.

Problem

my d3.js code generates the following HTML (this was taken from inspect element) The paths render a circle with text at the bottom of it. Ultimately I want the text to be UNDER the circle within the bounds of the SVG element. If the SVG element is larger, the G element renders larger. I need to control either the size of the G element or the size of the path elements. How would I add width and height constraints or padding to the G element? It doesn't respond to `width`, `height`, `x`, `y` in style cursory google search was not very helpful thanks for any insight.

Original source