将 CSS 网格与 dc-js 一起使用？

Question

我一直在尝试将 CSS 网格布局与 dc-js 结合使用。

图表的定义没有指定高度和宽度，让网格完成其理论上的工作。

我最终得到类似下图的结果，其中图形最终只占据了我在网格布局中为其设置的横向 space 的三分之一。由于某些原因，每个单独图表 div 中的 svg 仍然设置了默认高度和宽度。

这是预期的行为吗？

如果不是，我该如何解决这个问题？

编辑：当然它适用于此 jsFiddle...如果有帮助，我正在使用 dc 版本 3.0.12。

Answer 1

在dc.js.

中，根据容器调整图表的大小和设置宽度和高度并不是完全自动的

如您所见，默认宽度和高度为 200。但您可以通过传递 non-number（例如 null.

使图表计算其中任何一个

这部分是出于历史原因，部分是为了提供更多控制。 dc.js 早期没有这些功能，我们通常尝试以 backward-compatible 的方式添加功能。

如果您的网格在 window 改变大小时改变大小，您可以添加一个 onresize 侦听器，使每个图表将 SVG 调整为与图表 div 相同的大小:

window.onresize = function() {
    [chart1,chart2,chart3,chart4].forEach(
    c => {
      c.width(null).height(null).rescale();
      redraw_chart_no_transitions(c);
    });
};

如果 onresize 不合您的口味，请查看 resize observer scatter example 以获得更现代的方法。如果网格因 window resize.

之外的其他原因而调整大小，则您可能需要调整大小观察器

redraw_chart_no_transitions 是一个小的效用函数 available here，它临时将 transitionDuration 设置为零，这样重绘就不会动画化。动画过渡不适合提供即时反馈的操作，例如调整大小、平移和缩放。

通过使 window 非常大，我能够用您的 fiddle 重现您问题中描述的问题。

为了让网格布局使用所有 space 我添加了以下内容 CSS（不完美，这里有些东西我不明白）：

html, body {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  margin: 1em;
}

#test {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  /* ... */
}

默认情况下，网格单元格可以变大但不能变小。指定 min-width: 0 和 min-height: 0 以允许它们变小：

#test div {
  min-width: 0; min-height: 0;
}

这是一个 fork of your fiddle，其中有四个图表填充 window 并在 window 调整大小时调整大小。

Answer 2

为任何发现此问题的迷失灵魂发布此答案。

在我的具体情况下，我的网格位于 JQuery 选项卡上，该选项卡在 dc 图初始化时隐藏。

var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width; 在 base-mixin 的第 24 行（或 dc.js 的第 1416 行）为我的所有图表返回了 0。

所以 dc 无法计算出正确的大小，最终所有内容都使用默认值。

一旦我解决了这个问题，@Gordon 的回答帮助我调整了大小。

将 CSS 网格与 dc-js 一起使用？

use CSS grid with dc-js?

css

dc.js

css-grid