web-dev-qa-db-ja.com

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固有のものですか？

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

javascriptd3.js
118
daydreamer

'g'要素 をSVGに追加します。 g要素 SVG形状をグループ化するために使用されます 。したがって、d3固有ではありません。

107
Cihan Keser

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

PowerPointプレゼンテーションで行うようなグラフィック描画での「グループ化」の使用例とそれほど違いはありません。

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

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

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

13
kramamurthi