D3.js：在 .append("g") D3.js 代码中，'g' 是什么意思？

Question

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

我看了甜甜圈示例，发现了这段代码

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

我搜索了documentation，但不明白.append("g")在添加什么。

这是特定于D3的吗？

希望在这里获得指导。

- daydreamer

---

以下有很好的答案。建议观看D3Vienno在YouTube上关于D3分组的视频。 https://www.youtube.com/watch?v=SYuFy1j8SGs 实际上，如果你是初学者，整个系列都值得一看 :-)。 - d3noob

Answer 1

它将一个'g元素附加到SVG上。g元素用于将SVG形状分组在一起，因此不是仅限于d3使用。

- Cihan Keser

---

MDN JavaScript文档始终很有启发性：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g。您可以在此处找到一个实验性的笔：https://codepen.io/ahujamoh/pen/brRpWM。 - Mohit

Answer 2

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

它与图形绘制中的“分组”用例并没有太大区别，比如你在PowerPoint演示文稿中会做的那样。

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

如上链接所述：要进行翻译，您需要使用translate(x,y)：

<g>-元素没有x和y属性。要移动

- kramamurthi