如何使d3饼图响应？

Question

我有一个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 ）

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 个解决方案

解决方案1
1 2018-09-20 00:02:23

解决方案2
1 已采纳 2018-09-20 01:34:50

如何使d3饼图响应？

问题描述

2 个解决方案

解决方案1 1 2018-09-20 00:02:23

解决方案2 1 已采纳 2018-09-20 01:34:50

解决方案1
1 2018-09-20 00:02:23

解决方案2
1 已采纳 2018-09-20 01:34:50