148

我是新手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具体的吗？

在这里寻求指导

4

2 回答 2

135

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

于 2013-06-12T06:09:24.470 回答
23

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

于 2013-07-31T20:31:57.277 回答