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

标签 javascript d3.js dc.js

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

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

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

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

我通过 iframe 调用。

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

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

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

有人帮我解决这个问题。

最佳答案

我已经设置了一个带有 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);
};

关于javascript - 如何使 dc.js 图表具有响应性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22292369/

相关文章:

javascript - 请一些帮助来了解JavaScript函数调用。是闭包还是递归?

javascript - 更新 KnockoutJS 关联 observableArray 值

javascript - 在打印中加载 map 标记问题

javascript - d3.js将图像显示为圆形

javascript - Crossfilter (d3js/dcjs) 获取组中的组大小

dc.js - 直流综合图

javascript - 在DC JS中创建堆叠的条形图

javascript - amCharts中的序列图显示了不同的行为

javascript - flask-assets - 如何防止特定应用的静态 js 文件被另一个应用使用

javascript - 为什么 .each() 在 D3 中不起作用?