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

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

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

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

我搜索了文档，但不了解.append("g")附加的内容

甚至D3具体吗？

在这里寻找指导

它将“ g”元素附加到SVG。gelement 用于将SVG形状分组在一起，因此不，它不是d3特定的。

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

它与图形化绘图中的“分组”用例（例如，在Powerpoint演示文稿中进行的使用）没有什么不同。

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

如以上链接所指出：要翻译，您需要使用translate（x，y）：

在<g>-element没有X和Y属性。要移动a的内容，<g>-element您只能使用transform属性，并使用“ translate”函数，例如：transform =“ translate（x，y）”。