D3.js 响应D3图

我有这张D3图表——几乎是现成的。是否有一种方法可以使其响应并使用宽度和高度变量、内半径和外半径的百分比？我在一个响应网站上工作，需要根据屏幕大小/浏览器大小进行更改

请点击此处：

代码：

html，
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.图表容器{
/*宽度：50%；
身高：50%*/
}
可变宽度=350，
高度=350，
τ=2*Math.PI；
var arc=d3.svg.arc（）
.内半径（100）
.外层（135）
.startAngle（0）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
var background=svg.append（“路径”）
.基准面（{端角：τ}）
.style（“填充”、“绿色”）
.attr（“d”，弧）；
var front=svg.append（“路径”）
.基准面（{端角：.127*τ}）
.样式（“填充”、“灰色”）
.attr（“d”，弧）；
setInterval（函数（）{
foreground.transition（）
.持续时间（750）
.call（arcTween，Math.random（）*τ）；
}, 1500);
函数arcTween（过渡，新角度）{
转换属性（d），函数（d）{
var interpolate=d3.interpolate（d.endAngle，newAngle）；
返回函数（t）{
d、 端角=内插（t）；
返回弧（d）；
};
});
}

您可以使用

window.innerWidth

和

window.innerHeight

获取屏幕尺寸并相应设置图形，例如

var width = window.innerWidth,
    height = window.innerHeight,
    innerRadius = Math.min(width,height)/3,
    outerRadius = innerRadius + 30;

---

您可以使用SVG元素上的

viewBox

和

preserveAspectRatio

属性组合来调整图表的大小

有关完整示例，请参见此JSFIDLE：

---

使用此方法，您甚至不需要

调整大小

处理程序。

感谢您的回复！这在根据窗口页面调整图表大小方面确实有效。如何使用浏览器窗口调整大小？您可以使用

onresize

事件（参见示例），但您必须自己重新绘制。非常感谢您的帮助！我特别感激这一点，因为它一直无人应答/闲置@TechyDude，没问题——我自己也需要这个，看到了你的问题。我在其他地方找不到好的答案，所以扩展了你的例子。@SamSehnert，谢谢你的回答，我在这里做了类似的事情。但是当我把它移植到React中时，我的情节变得非常小，你能想到为什么吗？我的超级明星化身！谢谢@samsehnert可能的副本

var width = window.innerWidth,
    height = window.innerHeight,
    innerRadius = Math.min(width,height)/3,
    outerRadius = innerRadius + 30;

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