D3.js：.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特定のものですか？

ここでガイダンスを探しています

'g'要素をSVG に追加します。gelement はSVGシェイプをグループ化するために使用されるため、d3固有ではありません。

私はd3の学習曲線からもここに来ました。すでに指摘したように、これはd3に固有のものではなく、svg属性に固有のものです。これはsvg：g（グループ化）の利点を説明する本当に良いチュートリアルです。

これは、パワーポイントプレゼンテーションで行うようなグラフィックドローイングでの「グループ化」の使用例とそれほど異なりません。

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

上記のリンクで指摘したように、翻訳するには、translate（x、y）を使用する必要があります。

に<g>-elementはx属性とy属性がありません。のコンテンツを移動するには<g>-element、transform属性を使用して、次のように「translate」関数を使用することによってのみ行うことができます：transform = "translate（x、y）"。