React/DC.js - 调整图表大小（基于窗口大小）答案

【问题标题】：React/DC.js - Chart Resizing (based on window size)React/DC.js - 调整图表大小（基于窗口大小）
【发布时间】：2021-03-11 08:50:50
【问题描述】：

我正在尝试根据窗口大小调整几个 dc.js 图表的大小，我发现 DC.js 知识库中有一些 examples，其中 one in particular 处理调整画布元素的大小。

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

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

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

这是一个有效的stackblitz

附：我尝试在 chartTemplate.tsx 中实现此功能，但出现奇怪的输入错误：

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

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

【问题讨论】：

【解决方案1】：

设置

.width(null)

或

.height(null)

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

可以使用 CSS 规则来获得与 SVG 相同的图表 div 高度，但我认为这不值得，因为您似乎不希望在这里自动调整高度大小。

如果你只是想让图表填满窗口的宽度，你应该只设置

 .width(null)

并保持高度不变。

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

【讨论】：

谢谢！另外，您知道 DC.js 的类型是如何生成的吗？我仍然收到以下错误Argument of type 'null' is not assignable to parameter of type 'number'.ts(2345) 和Property 'rescale' does not exist on type 'number | (number & PieChart)'.，我真的只能用@ts-ignore 摆脱这些错误...并且不想让问题变得更糟：P
打字不是自动生成的——我不确定这是否可能准确。它们由DefinitelyTyped 的社区维护。如果您发现任何错误，请contribute there。他们有一个很好的审查系统，而且往往反应迅速。