Д3.js:что такое "g".добавить ("g") D3.код js?

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

Ищу руководство ЗДЕСЬ

2 ответов


Он добавляет элемент 'g' в SVG. g элемент используется для группировки форм SVG вместе, Так что нет, это не D3.


Я пришел сюда из кривой обучения 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", например: transform="translate(x, y)".