D3.js: что такое 'g' in.добавить("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 104
javascript d3.js

2 ответа:

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

95

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

это не так уж отличается от случая использования "группировки" в графических чертежах, таких как как те, которые вы бы сделали в презентации powerpoint.

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

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

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

12