响应D3图表
我有这个D3图表 – 几乎是开箱即用的。 有没有办法使它响应和使用百分比的宽度和高度variables，innerRadius和outerRadius？ 我在自适应网站上工作，需要根据屏幕大小/浏览器大小进行更改。
jsfiddle here： http : //jsfiddle.net/BTfmH/1/
码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> html, body { margin:0; padding:0; width:100%; height:100%; } .chart-container { /* width:50%; height:50%;*/ } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var width = 350, height = 350, τ = 2 * Math.PI; var arc = d3.svg.arc() .innerRadius(100) .outerRadius(135) .startAngle(0); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") var background = svg.append("path") .datum({endAngle: τ}) .style("fill", "green") .attr("d", arc); var foreground = svg.append("path") .datum({endAngle: .127 * τ}) .style("fill", "grey") .attr("d", arc); setInterval(function() { foreground.transition() .duration(750) .call(arcTween, Math.random() * τ); }, 1500); function arcTween(transition, newAngle) { transition.attrTween("d", function(d) { var interpolate = d3.interpolate(d.endAngle, newAngle); return function(t) { d.endAngle = interpolate(t); return arc(d); }; }); } </script> 您可以使用SVG元素上的viewBox和preserveAspectRatio属性组合来调整图表的大小。
看到这个完整的例子jsfiddle： http : //jsfiddle.net/BTfmH/12/
var svg = d3.select('.chart-container').append("svg") .attr("width", '100%') .attr("height", '100%') .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) .attr('preserveAspectRatio','xMinYMin') .append("g") .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");
这个方法甚至不需要resize处理程序。
你可以使用window.innerWidth和window.innerHeight来获得屏幕的尺寸，并相应地设置你的graphics，例如
var width = window.innerWidth, height = window.innerHeight, innerRadius = Math.min(width,height)/3, outerRadius = innerRadius + 30;
