D3.js: o que é 'g' no código .append (“g”) D3.js.

129

Eu sou novo D3.js, comecei a aprender hoje apenas

Eu olhei o exemplo do donut e encontrei esse código

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Eu procurei por documentação , mas não entendi o que .append("g")está anexando

É mesmo D3específico?

Procurando orientação aqui

javascript d3.js sonhador
fonte
5
Boas respostas chegando abaixo. Possível vale a pena conferir o seguinte vídeo do youtube do D3Vienno sobre o agrupamento no D3. youtube.com/watch?v=SYuFy1j8SGs Na verdade, se você está começando, vale a pena assistir toda a série :-).
d3noob

Respostas:

17

Eu vim aqui de uma curva de aprendizado do d3 também. Como já apontado, isso não é específico para d3, é específico para atributos svg. Aqui está um ótimo tutorial explicando as vantagens do svg: g (agrupamento).

Não é tão diferente do caso de uso de "agrupamento" em desenhos gráficos, como os que você faria em uma apresentação em powerpoint.

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

Conforme apontado no link acima: para traduzir você precisa usar o translate (x, y):

O <g>-elementnão tem atributos x e y. Para mover o conteúdo de um, <g>-elementvocê só pode fazer isso usando o atributo transform, usando a função "translate", assim: transform = "translate (x, y)".

kramamurthi
fonte