D3.js：.append("g") D3.js 代码中的“g”是什么？

Question

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

我查看了donut example 并找到了这段代码

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 特定的吗？

在这里寻求指导

Answer 1

它将'g' element 附加到 SVG。 g 元素 is used to group SVG shapes together，所以不，它不是 d3 特定的。

Answer 2

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

这与图形中的“分组”用例没有什么不同，例如 就像您在 PowerPoint 演示文稿中所做的那样。

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

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

<g>-element 没有 x 和 y 属性。移动内容 <g>-element 只能使用 transform 属性， 使用“翻译”函数，如下所示：transform="translate(x,y)"。