d3 크롬에서 svg 변환에 대한 해결 방법

Question

d3에서 플롯 팅을 자르기 위해 내부 치수를 만들었습니다. 다음은 코드입니다.

var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

var nestedSVG = svg.append('svg') 
     .attr("width", innerWidth) 
     .attr("height", innerHeight) 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

이것은 파이어 폭스에서 잘 작동합니다. 그러나 크롬은이 같은 svg 변환을 지원하지 않는다는 것을 알았습니다 (크롬에서는 작동하지 않습니다). 중첩 된 SVG를 변형 할 수있는 해결 방법이 있습니까?

Answer 1

x and y attributes on your nested SVG을 설정하여 좌표 변환을 만들 수 있습니다.

var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

var nestedSVG = svg.append('svg') 
     .attr("width", innerWidth) 
     .attr("height", innerHeight) 
     .attr("x", margin.left) 
     .attr("y", margin.top); 

은 더 복잡한 변환의 경우, 부모 또는 자녀 <g> 요소를 사용할 것이며, as you mentioned in comments to your previous question을 그 변환.