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

Он добавляет к SVG элемент «g» . gЭлемент используется для группировки фигур SVG вместе , поэтому он не специфичен для d3.

Джихан Кесер
источник
1
Документация MDN для javascript всегда освещает: developer.mozilla.org/en/docs/Web/SVG/Element/g . Экспериментальное перо можно найти здесь: codepen.io/ahujamoh/pen/brRpWM
Мохит
17

Я тоже пришел сюда из курса обучения d3. Как уже указывалось, это не относится к d3, это относится к атрибутам svg. Вот действительно хороший урок, объясняющий преимущества svg: g (группировка).

Это не сильно отличается от варианта использования «группировки» в графических рисунках, таких как те, которые вы использовали бы в презентации PowerPoint.

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

Как указано в ссылке выше: для перевода вам необходимо использовать translate (x, y):

<g>-elementНе имеет хну атрибуты. Чтобы переместить содержимое, <g>-elementвы можете сделать это только с помощью атрибута transform, используя функцию «translate», например: transform = «translate (x, y)».

kramamurthi
источник