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 + ")"); 

這在Firefox中正常工作。但是我知道chrome不支持像這樣的svg轉換（並且它不能在chrome中工作）。有沒有解決方法，以便我可以轉換nestedSVG？

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。