, 오늘에게 나는이 (가) donut example 모습 만D3.js : .append ("g")의 'g'는 무엇입니까? D3.js 코드? 내가 <code>D3.js</code>에 새로운 오전
을 배우기 시작하고 내가 documentation 검색
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' element를 추가 여기
지침을 찾고. g 요소 is used to group SVG shapes together이므로 d3과 관련이 없습니다.
javascript에 대한 MDN 문서는 항상 다음을 참조하십시오 : https://developer.mozilla.org/en/docs/Web/SVG/Element/g. 실험 펜은 여기에서 찾을 수 있습니다. https://codepen.io/ahujamoh/pen/brRpWM – ahujamoh
이 요소는 SVG 모양을 함께 그룹화하는 데 사용됩니다. 일단 그룹화하면 모양의 전체 그룹을 단일 모양처럼 변형 할 수 있습니다. 하나의 요소 내에서 모든 모양을 변환하는 기능은 중첩 된 요소 내에서 모양을 그룹화하는 것보다 유리합니다. 요소는 스스로 변형 할 수 없습니다. 중첩 된 모양을 변환하려면 요소 내에서 -element를 중첩해야합니다.
안녕하세요 @ajjain, 정보 주셔서 감사합니다. 참고로, 복사 된 콘텐츠를 원래 소스 (즉, Jenkov의 svg/g 기사 : http://tutorials.jenkov.com/svg/g-element.html)에 기인하는 정책이 여기에 있습니다. – Astravagrant
나는 여기에 d3 학습 곡선에서 왔습니다. 이미 지적했듯이 이것은 d3에만 국한된 것이 아니며 svg 속성에만 해당됩니다. 다음은 svg : g (그룹화)의 장점을 설명하는 훌륭한 자습서입니다.
파워 포인트 프리젠 테이션에서 그래픽 도면 (예 : )의 "그룹화"사용 사례와 다르지 않습니다.
위의 링크에서 지적http://tutorials.jenkov.com/svg/g-element.html
:
- 요소를 x 및 y 속성이 없습니다 : 당신은 (x, y)로 번역 사용해야 번역합니다. 내용의 을 이동하려면 다음과 같이 transform 속성을 사용하여 "translate"함수를 사용하여 변환 속성을 사용해야 만 가능합니다. transform = "translate (x, y)"
좋은 답변은 다음과 같습니다. D3에서 그룹화 할 때 D3Vienno의 다음 YouTube 동영상을 확인할 가치가 있습니다. https://www.youtube.com/watch?v=SYuFy1j8SGs 사실, 시작하는 경우 전체 시리즈를 시청할 가치가 있습니다 :-). – d3noob