D3.js：.append（“g”）中的“g”是什么？D3.js代码？

我是D3.js新手，今天才开始学习

我看了甜甜圈的例子 ，发现这个代码

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

我search文档 ，但不明白什么.append("g")正在追加

它甚至是D3具体？

在这里寻找指导

Answer 1

它将一个'g'元素添加到SVG。 g元素用于将SVG形状组合在一起 ，所以不是d3特定的。

Answer 2

我也是从D3学习曲线来的。 正如已经指出的那样，这不是特定于d3的，它对于svg属性是特定的。 这是一个非常好的教程，解释了svg：g（分组）的优点。

这与graphics化绘图中的“分组”使用情况没有什么不同，例如您在PowerPoint演示文稿中所做的分组。

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

正如上面指出的链接：翻译你需要使用translate（x，y）：

-element没有x和y属性。 要移动元素的内容，只能使用transform属性，使用“translate”函数，如下所示：transform =“translate（x，y）”。

Answer 3

该元素用于将SVG形状组合在一起。 分组后，您可以将整组形状转换为单个形状。 与在嵌套元素中分组形状相比，在元素内转换所有形状的能力是一个优势。 元素不能被自己转换。 您将不得不嵌套元素内的元素来转换它的嵌套形状。