2012-12-11 136 views
0

我画我的图表有两个尺寸的窗口的宽度:d3.js规模圆环图

var width = (window.innerWidth < 1280) ? 400 : 600, 
height = (window.innerWidth < 1280) ? 400 : 500, 
radius = Math.min(width, height)/2; 

var arc = d3.svg.arc().innerRadius(radius).outerRadius(radius - 10), 
arcFinal = d3.svg.arc().innerRadius(radius - 100).outerRadius(radius - 10), 
arcHover = d3.svg.arc().innerRadius(radius - 100).outerRadius(radius); 

var svg = d3.select("#chart").append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g") 
.attr("id", "pie") 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");} 

什么是更新resize事件这一功能的最好方法?

回答

2

好的,我固定通过添加:

... 
var svg = d3.select("#chart").append("svg") 
.attr("width", width) 
.attr("height", height) 
.attr("viewBox", "0, 0, " + width + ", " + height) 
.attr("preserveAspectRatio", "xMinYMin") 
... 

然后我更新resize事件的宽度和高度