如何使d3饼图响应？

Question

I have a PIE chart. 我有一个PIE图表。 And it works okay but I can't make it work to be responsive and resizable . 它可以正常工作，但是我不能使它变得敏感和可调整。 I need it to be compatible for a mobile browser and Ipad etc. 我需要它与移动浏览器和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>

I tried to wrap it to bootstrap but this doesn't make it fully resizable 我试图将其包装为引导程序，但这并没有使其完全可调整大小

How can I make it resizable depending on mobile device or desktop ? 如何根据移动设备或台式机调整其大小？

(PS: I'm using an example from here https://dzone.com/articles/d3js-pie-charts-made-super-easy-d3pie ) （PS：我正在从这里使用示例https://dzone.com/articles/d3js-pie-charts-made-super-easy-d3pie ）

Answer 1

You can use the size setting to scale the chart, and some CSS to center. 您可以使用size设置来缩放图表，并使用一些CSS居中。 Finally an resize event to update everything when the screen size changes. 最后，当屏幕尺寸改变时，一个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

destroying the chart is not exactly "responsive". 破坏图表并不完全是“响应式”。 the code-snippet only scales in "full page" mode (because the embed has fixed dimensions); 该代码段仅在“整页”模式下缩放（因为嵌入的尺寸固定）； but it scales dynamically, as it should be. 但它会按比例动态缩放。 there still may be space for improvement. 仍有改进的空间。

 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