Dc.js: Scrollable rowChart with no gap?

It seems like the height and fixedBarHeight cant both be used in a rowChart. Ids like to use fixedBarHeight so all the bars have the size I want, and the chart to be in a scrollable div so that the numbers of bars define the height of the chart. Is this possible?

回答1:

@ialarmedalien made this block, which introduces a dc.axisChart to separate the axis of the row chart from the actual chart.

Then you can use conventional overflow-y: auto on the row chart div.

Here is a related issue on dc.js.

回答2:

The dc.axis addon mentioned by @Gordon will solve the problem with the axis in a scrollable div, but not the problem asked. By default, the axis will only appear at the bottom, not before.

To solve this, add one div after the row chart div, this div will contain a copy of the axis.

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

Then initialize this axis in the javascript

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

Then change the margin of the row chart to 'glue' correctly with the axis. They also must have the same width.

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

Then , in the css

div.dc-chart {
  float: none;
}

Dont forget to include overflow-y: auto for the row style. Then you get:

This however doesnt solve the gap problem if your height is too large (or too small) compared to the fixedBarHeight.

But now your margin is zero, so the proper height is easy to calculate (but you must pass the gap value, which has 5 by default). Assuming N=chart.group().all().length, then do:

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

Which will give you:

Worth mentioning that at this point you dont even need the fixedBarHeight anymore. Simply setting the height using XN + gap(N+1) will result in dc auto setting this value to X.

Based on: https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1

回答3:

Just add style="overflow-y: auto; height: 300px;" in your rowchart div. It should work.