[英]Pie chart is not displaying as Responsive using d3.js
我正在使用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>
為什么圖表未以響應格式顯示?
這里有幾個問題:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.