D3.js : .append (“g”) D3.js 코드에서 'g'란 무엇입니까?

나는에 새로운 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구체적입니까?

여기에서 지침을 찾고

SVG에 'g'요소 를 추가합니다 . gelement 는 SVG 모양을 그룹화하는 데 사용 되므로 d3에 국한되지 않습니다.

나는 d3 학습 곡선에서도 여기에 왔습니다. 이미 지적했듯이 이것은 d3에만 국한된 것이 아니라 svg 속성에만 국한된 것입니다. 다음은 svg : g (그룹화)의 장점을 설명하는 정말 좋은 자습서입니다.

파워 포인트 프레젠테이션에서하는 것과 같은 그래픽 도면에서 "그룹화"의 사용 사례와 다르지 않습니다.

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

위의 링크에서 지적했듯이 번역하려면 translate (x, y)를 사용해야합니다.

에 <g>-elementx 및 y 속성이 없습니다. 의 내용을 이동하려면 다음과 <g>-element같이 "translate"함수를 사용하여 transform 속성 만 사용하십시오. transform = "translate (x, y)".