[英]How to make a d3 pie chart responsive?
我有一個PIE圖表。 它可以正常工作,但是我不能使它變得敏感和可調整。 我需要它與移動瀏覽器和Ipad等兼容。
<html>
<head></head>
<body>
<div id="pie"></div>
<button id="addData"> Add Data </button>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/benkeen/d3pie/0.2.1/d3pie/d3pie.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [
{ label: "1", value: 1 },
{ label: "2", value: 4 },
{ label: "3", value: 3 }
];
var pie = new d3pie("pie", {
data: {
content: data
}
});
</script>
</body>
</html>
我試圖將其包裝為引導程序,但這並沒有使其完全可調整大小
如何根據移動設備或台式機調整其大小?
(PS:我正在從這里使用示例https://dzone.com/articles/d3js-pie-charts-made-super-easy-d3pie )
您可以使用size
設置來縮放圖表,並使用一些CSS居中。 最后,當屏幕尺寸改變時,一個resize
事件將更新所有內容。
var data = [ { label: "1", value: 1 }, { label: "2", value: 4 }, { label: "3", value: 3 } ]; var pie; var update = function () { if (pie) pie.destroy(); var size = Math.min(innerHeight, innerWidth); var opt = { data: { content: data }, size: { canvasHeight: size, canvasWidth: size, } }; pie = new d3pie("pie", opt); }; update(); window.addEventListener('resize', update)
#pie > svg { margin: 0 auto; display: block; }
<div id="pie"></div> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script> <script src="https://d3js.org/d3.v4.min.js"></script>
破壞圖表並不完全是“響應式”。 該代碼段僅在“整頁”模式下縮放(因為嵌入的尺寸固定); 但它會按比例動態縮放。 仍有改進的空間。
var chart, svg, width, height; var data = [ { label: "1", value: 1 }, { label: "2", value: 4 }, { label: "3", value: 3 } ]; $(function() { chart = new d3pie("#container", {data: {content: data}}); svg = d3.select("#container > svg"); }); $(window).on('resize', function() { width = $(window).width(); height = $(window).height(); svg .attr("width", '100%') .attr("height", '100%') .attr('viewBox','0 0 ' + height + ' ' + width) .attr('preserveAspectRatio', 'xMinYMin') .append("g") .attr("transform", "translate(" + height + "," + width + ")"); });
html, body {margin: 0; height: 100%; overflow: hidden;} div#container > svg {min-height: 200px;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script> <script src="//cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script> <div id="container"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.