Javascript 如何使dc.js图表具有响应性_Javascript_D3.js_Dc.js

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

javascript d3.js

Javascript 如何使dc.js图表具有响应性,javascript,d3.js,dc.js,Javascript,D3.js,Dc.js,有什么方法可以使dc.js图表具有响应性吗我一直在努力使图表适合桌面大小我正在使用Twitter引导程序3。我将div的宽度存储到一个变量，并将其传递到图表宽度。这不会使图表具有响应性。但是在第一次加载时，图表会根据屏幕的大小调整宽度但是现在我面临一个挑战，那就是我有一个不同的文件用于dc.js图表我正在通过一个iframe呼叫当我通过iframe调用它时，所有div的宽度都是0，并且网页中没有显示任何图表但是当我单独重新加载iframe时，图表就会出现当我们点击那个特定的导航项目

有什么方法可以使

dc.js

图表具有响应性吗

我一直在努力使图表适合桌面大小

我正在使用Twitter引导程序3。我将div的宽度存储到一个变量，并将其传递到图表宽度。这不会使图表具有响应性。但是在第一次加载时，图表会根据屏幕的大小调整宽度

但是现在我面临一个挑战，那就是我有一个不同的文件用于

dc.js

图表

我正在通过一个

iframe

呼叫

当我通过

iframe

调用它时，所有div的宽度都是0，并且网页中没有显示任何图表

但是当我单独重新加载

iframe

时，图表就会出现

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

有人帮我解决这个问题。

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

给定带有iframe的标准页面：将该宽度用于初始渲染最后是一个函数，用于处理如何调整窗口大小

当您在dc.js图表实例上调用

.width（）

和

.height（）

方法（或根本不调用它们）时传递

null

时，它将使用锚元素的宽度和高度（然后可以使用引导或其他响应css框架中的一些evergreen响应css类来设置样式；）)

有关更多信息，请参见：

您能在JSFIDLE中提供代码示例吗？如何在FIDLE中生成iFrame？很高兴听到。如果您想在此处列出解决方案，您可以回答自己的问题。；）我意识到这是一个非常老的问题，但仍被列为未回答的问题。

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

<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);
};