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 + ")");

我搜索了文档,但没有理解.append("g")附加内容

它甚至D3具体吗？

在这里寻找指导

Answer 1

它将一个'g'元素附加到SVG.gelement 用于将SVG形状组合在一起,因此不是d3特定的.

Answer 2

我也是从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)".