我有一个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(
销毁图表并不完全是"响应式"。 代码片段仅在"整页"模式下缩放(因为嵌入具有固定尺寸(; 但它是动态扩展的，因为它应该是这样。 仍有改进的空间。
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>您可以使用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>