D3.js: що таке "g" у .append ("g") код D3.js?

129

Я новачок 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конкретно?

Шукаєте вказівки тут

javascript d3.js

— мрійник
джерело

5

Хороші відповіді внизу. Можливо, варто переглянути наступне відео на YouTube від D3Vienno про групування в D3. youtube.com/watch?v=SYuFy1j8SGs Насправді, якщо ви починаєте, всю серію варто переглянути :-).

— d3noob

116

Він додає елемент 'g' до SVG. gелемент використовується для групування SVG фігур разом , так що ні, це не конкретно d3.

— Джихан Кезер
джерело

1

Документація MDN для javascript завжди просвітлює: developer.mozilla.org/en/docs/Web/SVG/Element/g . Експериментальну ручку можна знайти тут: codepen.io/ahujamoh/pen/brRpWM

— Mohit

17

Я прийшов сюди і з кривої навчання d3. Як уже вказувалося, це не властиво d3, воно характерне для атрибутів svg. Ось справді хороший підручник, що пояснює переваги svg: g (групування).

Він не так відрізняється від випадку використання "групування" в графічних малюнках, таких як ті, які ви робили б у презентації Powerpoint.

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

Як зазначено вище у посиланні: для перекладу вам потрібно використовувати translate (x, y):

<g>-elementНе має хну атрибути. Щоб перемістити вміст a, <g>-elementви можете це зробити лише за допомогою атрибута transform, використовуючи функцію "translate", наприклад: transform = "translate (x, y)".

— крамамурті
джерело