Question

我是D3.js的新手，今天才开始学习

我查看了donut example并找到了此代码

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

我搜索了documentation，但未了解.append("g")附加的内容

甚至是D3具体的吗？

在这里寻找指导

Answer 1

它向SVG添加'g' element。 g元素is used to group SVG shapes together，所以不是d3具体的。

Answer 2

我也是从d3学习曲线来到这里的。正如已经指出的那样，这不是特定于d3，它特定于svg属性。这是一个非常好的教程，解释了svg：g（分组）的优点。

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

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

如上所述链接：要翻译你需要使用translate（x，y）：

<g>-element没有x和y属性。移动内容 <g>-element只能使用transform属性执行此操作，使用“翻译”功能，如下所示：transform =“translate（x，y）”。

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

2 个答案: