D3.js: что такое "g" в .append( "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 конкретным?

Ищите руководство здесь

Ответ 1

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

Ответ 2

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

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

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

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

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

Ответ 3

Элемент используется для группировки форм SVG. После сгруппировки вы можете преобразовать всю группу фигур, как если бы это была одна форма. Возможность преобразования всех фигур в пределах -элемента является преимуществом по сравнению с группировкой фигур внутри вложенного элемента. -элементы не могут быть преобразованы сами по себе. Вам нужно будет вложить -element в -element, чтобы преобразовать свои вложенные фигуры.