D3.js: apa yang 'g' dalam .append (“g”) kode D3.js?

129

Saya baru D3.jsmulai belajar hari ini saja

Saya melihat contoh donat dan menemukan kode ini

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

Saya mencari dokumentasi , tetapi tidak mengerti apa .append("g")yang ditambahkan

Apakah ini D3spesifik?

Mencari panduan di sini

javascript d3.js

— pelamun
sumber

5

Jawaban bagus datang di bawah. Mungkin layak untuk memeriksa video youtube berikut dari D3Vienno pada pengelompokan di D3. youtube.com/watch?v=SYuFy1j8SGs Sebenarnya, jika Anda memulai, seluruh seri layak ditonton :-).

— d3noob

116

Ini menambahkan elemen 'g' ke SVG. gelemen digunakan untuk mengelompokkan bentuk SVG bersama-sama , jadi tidak ada itu tidak spesifik d3.

— Cihan Keser
sumber

1

Dokumentasi MDN untuk javascript selalu mencerahkan: developer.mozilla.org/en/docs/Web/SVG/Element/g . Pena eksperimental dapat ditemukan di sini: codepen.io/ahujamoh/pen/brRpWM

— Mohit

17

Saya datang ke sini dari kurva belajar d3 juga. Seperti yang sudah ditunjukkan ini tidak spesifik untuk d3, itu khusus untuk atribut svg. Berikut ini adalah tutorial yang sangat bagus menjelaskan kelebihan svg: g (pengelompokan).

Ini tidak jauh berbeda dari kasus penggunaan "pengelompokan" dalam gambar grafis seperti yang akan Anda lakukan dalam presentasi powerpoint.

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

Seperti yang ditunjukkan pada tautan di atas: untuk menerjemahkan, Anda perlu menggunakan terjemahan (x, y):

Tidak <g>-elementmemiliki atribut x dan y. Untuk memindahkan konten, <g>-elementAnda hanya dapat melakukannya menggunakan atribut transform, menggunakan fungsi "translate", seperti ini: transform = "translate (x, y)".

— kramamurthi
sumber