javascript - D3.js: vad är 'g' i .append("g") D3.js-kod?

Jag är ny på D3.js, började lära mig idag bara

Jag tittade på donutexemplet och hittade denna kod

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

Jag sökte efter dokumentation, men förstod inte vad .append("g") lägger till

Är det ens D3-specifikt?

Letar efter vägledning här

Svar #1

Den lägger till ett 'g'-element till SVG. g-elementet används för att gruppera SVG-former tillsammans, så nej, det är inte specifikt för d3.

Svar #2

Jag kom hit från en d3-inlärningskurva också. Som redan påpekats är detta inte specifikt för d3, det är specifikt för svg-attribut. Här är en riktigt bra handledning som förklarar fördelarna med svg:g (gruppering).

Det är inte så annorlunda från användningsfallet med "gruppering" i grafiska teckningar, såsom de man skulle göra i en PowerPoint-presentation.

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

Som påpekats i ovanstående länk: för att översätta måste du använda translate(x,y):

<g>-elementet har inga x- och y-attribut. För att flytta innehållet i ett <g>-element kan du endast göra det med hjälp av attributet transform, med funktionen "translate", på detta sätt: transform="translate(x,y)".

Relaterade artiklar