如何使 dc.js 图表具有响应性答案

【问题标题】：How to make the dc.js charts responsive如何使 dc.js 图表具有响应性
【发布时间】：2014-04-13 02:18:10
【问题描述】：

有没有办法让dc.js 图表响应？

为了使图表适合桌面大小，我费了很大力气。

我正在使用 Twitter Bootstrap 3。我将 div 的宽度存储到一个变量并将其传递给图表宽度。这不会使图表响应。但在第一次加载时，图表会根据屏幕大小达到宽度。

但现在我面临一个挑战，我有一个不同的文件用于dc.js 图表。

我正在通过iframe 拨打电话。

当我通过iframe 调用它时，所有 div 的宽度都是 0，并且网页中没有出现图表。

但是当我单独重新加载iframe 时，图表就会出现。

当我们点击特定的导航项时，我什至尝试加载框架。但即使这样对我也不起作用。

有人帮我解决这个问题。

【问题讨论】：

你能提供一个 jsfiddle 中的代码示例吗？
如何在小提琴中制作 iFrame？

标签： javascript d3.js dc.js

【解决方案1】：

我已经设置了一个带有 dc.js 演示的 plunker，我在调整大小时会重新渲染，并获取容器元素的宽度以确定大小。它嵌入在 iframe 中并按原样工作。我建议使用这个 plunker 来适应你的 css，因为我只是在做最简单的 iframe 设置。我想象你做了类似的事情，所以我不确定你哪里出错了。希望这会有所帮助。

responsive DC chart in an iframe

给定一个带有 iframe 的标准页面：

<body>
  <h1>Test</h1>
  <iframe src="iframe.html" class="iframe"></iframe>
</body>

还有一个带有容器和脚本的 iframe 来加载图表：

<body> <h2>inside iframe</h2> 
   <div id="box-test"></div>
   <div id="pie-chart"></div> 
   <script src="script.js" type="text/javascript"></script> 
</body>

获取所需宽度的调用

var width = document.getElementById('box-test').offsetWidth;

使用该宽度进行初始渲染

chart
  .width(width)
  .height(480)
  .margins({top: 10, right: 50, bottom: 30, left: 50})
  .dimension(experimentDimension)
  .group(speedArrayGroup)
  .elasticY(true)
  .elasticX(true);

最后是一个处理窗口大小调整的函数

window.onresize = function(event) {
  var newWidth = document.getElementById('box-test').offsetWidth;
  chart.width(newWidth)
    .transitionDuration(0);
  pie.transitionDuration(0);
  dc.renderAll();
  chart.transitionDuration(750);
  pie.transitionDuration(750);
};

【讨论】：

很高兴听到。如果您想在此处列出您的解决方案，您可以回答自己的问题。 ;) 我意识到这是一个非常古老的问题，但它仍然被列为未回答。

【解决方案2】：

当您在 dc.js Chart 实例上调用 .width() 和 .height() 方法（或根本不调用它们）时传递 null 时，它将使用锚元素的宽度和高度（然后可以使用来自引导程序或其他一些响应式 css 框架的一些常绿响应式 css 类进行样式化;))。

【讨论】：