React/DC.js - 调整图表大小（基于 window 大小）

Question

我正在尝试根据 window 大小调整几个 dc.js 图表的大小，我发现有一些 examples in the DC.js knowledgebase, where one in particular 处理调整 canvas 元素的大小。

当我实施时，图表无限地垂直调整（调试建议）2 个像素。

我猜这是 React/DOM 冲突，我可以通过将以下内容添加到图表样式中来解决这个问题（不幸的是，在我的情况下这不是解决方案）：

...
.style('position', 'absolute')
.style('left', 0)
.style('top', 0);
...

这是一个有效的 stackblitz

P.S。我试图在 chartTemplate.tsx 中实现这一点，但我收到一个奇怪的输入错误：

Property 'height' does not exist on type 'number | PieChart'.
Property 'height' does not exist on type 'number'.(2339)

最终，为了简洁起见，我想在模板中实现一次（而不是每个图表文件），但我不确定这是否是 DC.js 的输入问题（因为我已经运行出现一些定义错误）或我的实现中出现错误

Answer 1

设置

.width(null)

或

.height(null)

告诉 dc.js 使用其 div 的宽度或高度。在这种情况下，您没有任何限制图表 div 高度的东西，因此默认情况下 CSS 框规则，它的大小比 SVG 大一点，您最终无限循环。

可以使用 CSS 规则来使图表 div 与 SVG 具有相同的高度，但我认为这不值得，因为它看起来不像你想在这里自动调整高度。

如果您只是想让图表填满 window 的宽度，您应该只设置

 .width(null)

并保持高度不变。

如果您希望图表垂直拉伸，您可以像开始时的示例一样使用 CSS Flexbox，或者 CSS Grid 是另一个不错的选择。任何限制图表高度 div（表格，恒定高度）的东西对于 .height(null) 都是安全的，但是当 div 期望围绕 SVG 调整大小时它会出现问题。 :)

React/DC.js - Chart Resizing (based on window size)