在. 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特异性的吗?

在这里寻求指引

87777 次浏览

它将一个 G 元素附加到 SVG.g元素 用于将 SVG 形状分组在一起,所以不是特定于 d3的。

我也是从 D3学习曲线来到这里的。正如已经指出的那样,这不是特定于 d3的,而是特定于 svg 属性的。下面是一个非常好的教程,解释 svg: g (分组)的优点。

这与图形绘图中的“分组”用例没有什么不同 就像你在幻灯片演示中做的那样。

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

正如上面的链接所指出的: 要翻译你需要使用的翻译(x,y) :

<g>-element没有 x 和 y 属性 对于 <g>-element,只能使用转换属性, 如下所示:。