我正在使用d3.js绘制动画饼图。饼图工作正常，但它没有显示响应。饼图的尺寸不随屏幕尺寸的变化而调整。 我尝试使用d3.js启动Bootstrap，但无法将图表呈现为响应。
以下是代码：
使用Javascript：
var w = 583,
h = 500,
r = Math.min(w, h) / 2,
data = [{"label":"Yes:", "percentage":yes_percentage, "value":30}, {"label":"No:", "percentage":no_percentage, "value":70}], // Data with label-value pairs
data2 = data.map(function(d) { return d.value})
color = d3.scale.category20(),
arc = d3.svg.arc().outerRadius(r),
donut = d3.layout.pie();
var vis = d3.select("#chart-1")
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg") // Place the chart in 'pie-chart-div'
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400")
.classed("svg-content-responsive", true)
.data([data])
.text("hello")
.attr("width", w)
.attr("height", h);
var arcs = vis.selectAll("g.arc")
.data(donut(data2))
.enter().append("g")
.attr("class", "arc")
.attr("transform", "translate(" + r + "," + r + ")");
var paths = arcs.append("path")
.attr("fill", function(d, i) { return color(i); });
var labels = arcs.append("text")
.attr("transform", function(d) { d.innerRadius = 140; return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".85em")
.text(function(d, i) { return data[i].label+"\n"+data[i].percentage; });
paths.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie);
paths.transition()
.ease("elastic")
.delay(function(d, i) { return 2000 + i * 50; })
.duration(750)
.attrTween("d", tweenDonut);
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) {
return arc(i(t));
};
}
function tweenDonut(b) {
b.innerRadius = r * .6;
var i = d3.interpolate({innerRadius: 0}, b);
return function(t) {
return arc(i(t));
};
}
CSS：
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
/*position: absolute;*/
top: 10px;
left: 0;
}
.chart-style {
float:left;
margin:68px 0 0 0
}
HTML
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container"> <!-- Bootstrap container -->
<div id="chart-1" class="chart-style"></div>
</div>
为什么图表不以响应格式显示？
答案 0 :(得分：2)
夫妻问题在这里：
1。）首先，您使用以下内容静态调整svg元素的大小：
.attr("width", w)
.attr("height", h);
这需要是一个百分比：
.attr("width", '100%')
.attr("height", '100%');
2。）当您从svg向上走过树时，所有父容器的宽度也必须是百分比。 <div id="chart-1"没有，请添加：
.chart-style {
float: left;
margin: 68px 0 0 0;
width: 100%;
}
此外，你的svg上也有一个奇怪的.data调用没有任何意义，并产生一个破坏的DOM。
运行代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<style>
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
/* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
/*position: absolute;*/
top: 10px;
left: 0;
}
.chart-style {
float: left;
margin: 68px 0 0 0;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="chart-1" class="chart-style"></div>
</div>
<script>
var w = 583,
h = 500,
r = Math.min(w, h) / 2,
data = [{
"label": "Yes:",
"percentage": 25,
"value": 30
}, {
"label": "No:",
"percentage": 75,
"value": 70
}], // Data with label-value pairs
data2 = data.map(function(d) {
return d.value
})
color = d3.scale.category20(),
arc = d3.svg.arc().outerRadius(r),
donut = d3.layout.pie();
var vis = d3.select("#chart-1")
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg") // Place the chart in 'pie-chart-div'
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 500")
.classed("svg-content-responsive", true)
//.data([data])
//.text("hello")
.attr("width", '100%')
.attr("height", '100%');
var arcs = vis.selectAll("g.arc")
.data(donut(data2))
.enter().append("g")
.attr("class", "arc")
.attr("transform", "translate(" + r + "," + r + ")");
var paths = arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
});
var labels = arcs.append("text")
.attr("transform", function(d) {
d.innerRadius = 140;
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".85em")
.text(function(d, i) {
return data[i].label + "\n" + data[i].percentage;
});
paths.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie);
paths.transition()
.ease("elastic")
.delay(function(d, i) {
return 2000 + i * 50;
})
.duration(750)
.attrTween("d", tweenDonut);
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({
startAngle: 0,
endAngle: 0
}, b);
return function(t) {
return arc(i(t));
};
}
function tweenDonut(b) {
b.innerRadius = r * .6;
var i = d3.interpolate({
innerRadius: 0
}, b);
return function(t) {
return arc(i(t));
};
}
</script>
</body>
</html>