javascript D3.js：什么是 .append("g") D3.js 代码中的“g”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17057809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3.js: what is 'g' in .append("g") D3.js code?
提问by daydreamer
I am new to D3.js, started learning today only
我是新手D3.js，今天才开始学习
I looked the the donut exampleand 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
我搜索了文档，但不明白.append("g")附加的是什么
Is it even D3specific?
它甚至D3具体吗？
Looking for guidance here
在这里寻求指导
采纳答案by Cihan Keser
It appends a 'g' elementto the SVG. gelement is used to group SVG shapes together, so no it's not d3 specific.
它将“g”元素附加到 SVG。gelement用于将 SVG 形状组合在一起，因此它不是 d3 特定的。
回答by kramamurthi
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).
我也是从 d3 学习曲线来到这里的。正如已经指出的那样，这并非特定于 d3，而是特定于 svg 属性。这是一个非常好的教程，解释了 svg:g（分组）的优点。
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
http://tutorials.jenkov.com/svg/g-element.html
As pointed in above link: to translate you need to use translate(x,y):
正如上面链接所指出的：要翻译，您需要使用 translate(x,y)：
The
<g>-elementdoesn't have x and y attributes. To move the contents of a<g>-elementyou can only do so using the transform attribute, using the "translate" function, like this: transform="translate(x,y)".
在
<g>-element没有X和Y属性。要移动 a 的内容，<g>-element您只能使用 transform 属性，使用“translate”函数，像这样：transform="translate(x,y)"。
