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

Question

似乎height和fixedBarHeight都不能用于rowChart。喜欢使用fixedBarHeight，因此所有的条形都有我想要的尺寸，图表在可滚动的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 );

然后将行图的边距更改为与轴正确“粘合”。它们也必须具有相同的宽度。

    .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了。只需使用XN +间隙（N + 1）设置height将导致dc自动将此值设置为X.

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

Answer 3

只需添加style =“overflow-y：auto; height：300px;”在你的行图div中。它应该工作。