Dc.js：可滚动的rowChart没有间隙？

Question

似乎height和fixedBarHeight都不能用于rowChart。喜欢使用fixedBarHeight的ID，所以所有的条形都有我想要的尺寸，图表在可滚动的div中，这样条形的数量就定义了图表的高度。这可能吗？

Answer 1

@ialarmedalien制作了this block，它引入了dc.axisChart来将行图的轴与实际图表分开。

然后，您可以在行图overflow-y: auto上使用传统div。

这是related issue on dc.js。

Answer 2

@Gordon提到的dc.axis插件将解决可滚动div中轴的问题，但问题并非如此。默认情况下，轴仅显示在底部，而不是之前。

要解决此问题，请在行图div之后添加一个div，此div将包含轴的副本。

<div id='row-axis'></div>

然后在javascript中初始化此轴

dc.axisChart('#row-axis')
        .margins({ left: 10, top: 0, right: 10, bottom: 10 })
        .height( 50 )
        .width( 300 )
        .dimension( dimension )
        .group( group )
        .elasticX( true );

然后将行图的边距更改为＆＃39; glue＆＃39;正确的轴。它们也必须具有相同的宽度。

    .width(300)
    .margins({ left: 10, top: 0, right: 10, bottom: 0 })

然后，在css中

div.dc-chart {
  float: none;
}

不要忘记为行样式添加overflow-y: auto。然后你得到：

如果你的身高太大（或太小），与fixedBarHeight相比，这并不能解决间隙问题。

但是现在你的边距是零，所以适当的高度很容易计算（但你必须传递gap值，默认值为5）。假设N=chart.group().all().length，则执行：

.fixedBarHeight(X)
.height(X*N + gap*(N+1))

哪个会给你：

值得一提的是，此时你甚至不再需要fixedBarHeight了。只需使用X N +间隙（N + 1）设置height将导致直流自动将此值设置为X.

基于：https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1

Answer 3

只需添加style =“ overflow-y：auto; height：300px;”在您的行图div中。应该可以。