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

javascript d3.js

2022-08-30 03:04:27

我是新手，今天才开始学习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

在此处查找指导

答案 1

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

答案 2

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

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

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

如上面的链接所示：要翻译，您需要使用translate（x，y）：

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