时间戳

首页 > 解决方案 > 调整在 d3.js 图中绘制的图的大小

javascript - 调整在 d3.js 图中绘制的图的大小

问题描述

我正在使用烧瓶开发仪表板，并且在客户端使用 d3.js。我在 html 上绘制了一个图表，我确实想将其调整为完美的大小，以便我可以创建一个侧边栏。如何调整此图的大小。这是我在 html 上绘制的 DIV 类的一部分：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="chart" id="bargraph">
                <script>
                    var graphs = {{plot | safe}};
                    Plotly.plot('bargraph',graphs,{},width = 200);

                </script>

            </div>
        </div>
    </div>

帮助我了解如何调整 d3.js 绘制的图形的大小

标签： javascriptd3.js

解决方案

如果您希望图表适合内部的所有空间，id="bargraph您需要获取它的宽度，然后放入 Plotly 构造函数。它可能是这样的：

 <script>
   var graphs = {{plot | safe}};
   // taking container width where we want to put chart
   var getContainerWidth = document.querySelector('#bargraph').offsetWidth

   // add width to our chart constructor
   Plotly.plot('bargraph',graphs,{},width = getContainerWidth);
  </script>

推荐阅读