Tôi có biểu đồ D3 này - khá nhiều trong số đó. Có cách nào để làm cho nó đáp ứng và sử dụng tỷ lệ phần trăm cho các biến chiều rộng và chiều cao, innerRadius, và outerRadius? Tôi đang làm việc trên một trang web đáp ứng và cần điều này để thay đổi dựa trên kích thước màn hình/kích thước trình duyệt.biểu đồ D3 phản hồi
jsfiddle đây: http://jsfiddle.net/BTfmH/1/
Code:
<!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>
bản sao có thể có của [Whats cách tốt nhất để tạo bố cục trực quan d3.js đáp ứng?] (Http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3 -js-visualization-layout-responsive) – user456584