Question

我有一个PIE图表。它可以正常工作，但是我不能使它变得敏感和可调整。我需要它与移动浏览器和Ipad等兼容。

我试图将其包装为引导程序，但这并不能完全调整大小

如何根据移动设备或台式机调整其大小？

（PS：我在这里https://dzone.com/articles/d3js-pie-charts-made-super-easy-d3pie使用一个示例）

Answer 1

您可以使用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>

Answer 2

销毁图表并不完全是“响应式”。该代码段仅在“整页”模式下缩放（因为嵌入的尺寸固定）；但它会按比例动态缩放。仍有改进的空间。

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>

如何使d3饼图响应？

2 个答案: