dc.js heatmap - 使最上面一行rects开始于y="0"

Question

我有一个dc.js的热图。

但我想在上面添加网格线，就像这样。

你可以看到这些线与矩形的底部边缘不一致。插入线条本身很简单，你只需要从零开始，然后根据 rects 的高度添加 11 条线，在这种情况下，它将始终是 11 chart.effectiveHeight()。

它们不匹配的原因似乎是顶部的矩形行并不总是从0开始，相反，似乎有一个随机（？）的y位置，图表开始，这将随着图表容器的高度而改变，例如，这个y位置开始于5。

如果它是一致的，那么我可以从这个数字开始追加行数，而不是0，但事实并非如此。我已经尝试了一些黑客的工作方法，但是我不确定如何在所有的矩形在DOM中可用后得到它们的y位置。

有趣的是，演示的热图没有这个问题。

这里是热图的代码。

 const heat_map = dc.heatMap('#heatmap');
  heat_map
    .width(0)
    .height(0)
    .margins(margins)
    .dimension(hm_dim)
    .group(hm_group)
    .keyAccessor(function(d) { return +d.key[0]; })
    .valueAccessor(function(d) { return +d.key[1]; })
    .colorAccessor(function(d) { return +d.value; })
    .colors(color_scale)
    .calculateColorDomain()
    .yBorderRadius(0)
    .xBorderRadius(0)
  heat_map.render();

有没有办法强制rects从0开始？或者让顶行的y位置随机？我看了一下源码，但有点迷茫。另外，我还想过创建一个假组，将每个矩形包含在网格中，然后网格线就可以成为矩形的边框，但我认为这有点太重了。

Answer 1

使用CSS勾勒单元格的轮廓

使用CSS很容易勾勒出单元格的轮廓。

rect.heat-box {
  stroke-width: 1;
  stroke: black;
}

例如fiddle.

然而，正如你所指出的，这只有在所有单元格都有值的情况下才有效；交叉滤波不会创建空单元格，而且我同意仅仅为某些行使用假组来填充它们是很荒谬的。

所以，回答你最初的问题......。

为什么图表顶部有一个空白？

热图为单元格计算了一个整数大小，可能会有剩余的空间（因为空间没有被完美分割）。

这有点恶心，但热图示例通过使用每个维度的单元格数来计算图表的宽度和高度，避免了额外的空间。

chart
  .width(45 * 20 + 80)
  .height(45 * 5 + 40)

默认的边距是 {top: 10, right: 50, bottom: 30, left: 30} 所以这将为每个单元格分配45x45像素，并添加边距以获得正确的图表大小。

由于本例中的热图是20列5行，所以计算单元格的宽度和高度为45。