Dc.js: 没有间隙的可滚动行图表？

Question

height 和 fixedBarHeight 似乎不能同时用于 rowChart。 IDs 喜欢使用 fixedBarHeight 这样所有的条形都有我想要的大小，图表可以滚动 div 这样条形的数量定义了图表的高度。这可能吗？

Answer 1

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

然后就可以在柱状图div.

上使用常规overflow-y: auto

这里是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 );

然后将柱状图的边距改成'glue' 正确带坐标轴。它们还必须具有相同的宽度。

    .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 + gap(N+1) 设置 height 将导致 dc 自动将此值设置为 X.

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

Answer 3

只需在行图中添加 style="overflow-y: auto; height: 300px;" div。它应该有效。

Dc.js: 没有间隙的可滚动行图表？

Dc.js: Scrollable rowChart with no gap?

dc.js