如何在窗口调整大小时调整nvd3图表的大小？

I've created a population pyramid in nvd3, but it's not resizing as it's supposed to, and I cannot diagnose why. Here's a pen with the problematic code: http://codepen.io/laissezpasser/pen/qNrPXQ

我在nvd3中创建了一个人口金字塔,但它并没有像它应该的那样调整大小,我无法诊断为什么。这是一个有问题代码的笔:http://codepen.io/laissezpasser/pen/qNrPXQ

For comparison, here's a working example of the responsiveness I'm trying to achieve in the pen above: Try [resizing one of the windowpanes in this pen: http://codepen.io/laissezpasser/pen/jrBGQG For some reason, it seems to be ignoring the following code:

为了比较,这里是我试图在上面的笔中实现的响应性的一个工作示例:尝试[调整此笔中的一个窗玻璃:http://codepen.io/laissezpasser/pen/jrBGQG出于某种原因,它似乎忽略了以下代码:

nv.utils.windowResize(chart.update);
return chart;

1 个解决方案

#1

Your code is just simply broken, pay attention to the JavaScript console, it would have told you your errors...

你的代码只是简单的破解,注意JavaScript控制台,它会告诉你你的错误......

// why is this line here, you've already set the data!
d3.select('#chart svg')
  .datum(data()) //<-- data is not defined
  .transition().duration(500).call(chart);

// why is this line here, interactiveLayer is not defined!
interactiveLayer.tooltip
  .headerFormatter(function(d, i) {
    return nv.models.axis().tickFormat(',')(d,i);
  })

Removing these offending lines, fixes the issue.

删除这些违规行,修复了问题。

#1