D3.js: .append ("g") D3.js kodundaki "g" nedir?

129

Ben yeniyim D3.js, sadece bugün öğrenmeye başladım

Halka örneğine baktım ve bu kodu buldum

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

Belgeleri aradım , ancak neyin .append("g")eklendiğini anlamadım

Hatta D3spesifik mi?

Burada rehberlik arıyorum

javascript d3.js

— hayâlperest
kaynak

5

Aşağıda iyi cevaplar geliyor. D3'te gruplama hakkında D3Vienno'nun aşağıdaki youtube videosunu incelemeye değer. youtube.com/watch?v=SYuFy1j8SGs Aslında, eğer başlıyorsanız, dizinin tamamı izlemeye değer :-).

— d3noob

116

SVG'ye bir 'g' öğesi ekler . göğesi , SVG şekillerini birlikte gruplamak için kullanılır , bu nedenle d3'e özgü değildir.

— Cihan Keser
kaynak

1

JavaScript için MDN belgeleri her zaman aydınlatır: developer.mozilla.org/en/docs/Web/SVG/Element/g . Burada deneysel bir kalem bulunabilir: codepen.io/ahujamoh/pen/brRpWM

— Mohit

17

Ben de buraya d3 öğrenme eğrisinden geldim. Daha önce de belirtildiği gibi, bu d3'e özgü değildir, svg niteliklerine özgüdür. İşte svg: g'nin (gruplama) avantajlarını açıklayan gerçekten iyi bir öğretici.

Bir powerpoint sunumunda yaptığınız gibi grafiksel çizimlerde "gruplama" kullanım durumundan çok da farklı değildir.

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

Yukarıdaki bağlantıda belirtildiği gibi: çevirmek için translate (x, y) kullanmanız gerekir:

<g>-elementX ve y özelliklerini yok. A'nın içeriğini taşımak için, <g>-elementbunu yalnızca "translate" işlevini kullanarak dönüştürme özelliğini kullanarak yapabilirsiniz, örneğin: transform = "translate (x, y)".

— kramamurthi
kaynak