D3.js:什么是'g'在.append(“g")D3.js代码

D3.js: what is 'g' in .append("g") D3.js code?

本文关键字：D3 js quot 代码 append 什么      更新时间：2023-09-26

我是新来的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特异性的吗?

在这里寻找指导

在SVG中添加一个'g'元素。g元素用于将SVG形状分组在一起，所以不，它不是d3特定的

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

这与图形化绘图中的"分组"用例没有什么不同就像你在ppt上做的一样。

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

正如上面链接所指出的:要进行翻译，您需要使用translate(x,y):

<g>-element没有x和y属性。移动内容的<g>-element，您只能使用transform属性这样做，使用"translate"函数，如下所示:transform="translate(x,y)".

相关文章：