是否可以滚动 div 以适应 dc.js 行图中的柱数

Question

我有几个行图，它们通过 dc.js 相互连接。正如 . However these rowcharts also implement filtering and removing 所解释的那样，这些行图在不同 div 的顶部有 x 轴，因此，每当我在一个行图中过滤时，其他行图中的条形数量就会减少，但它会保持大小可滚动 div，即使显示的内容下方没有栏。此外，我很确定这很容易，但我还没有想出如何将重置按钮放在图表下方，因为它显示在图表 div 和轴 div 之间，如图所示下面。

有没有办法解决这些问题？

这是我在每个行图中的内容 div:

<div id='axis'></div>
  <div id="chart"  style="overflow-y:auto; height:200px;">
    <div>            
      <span class="reset" style="display: none;">Phylum seleccionado(s):
        <span class="filter"></span>
          <a class="reset" href="javascript:Chart.filterAll();dc.redrawAll();" style="display">Reset</a>
        </span>
    </div>
  </div>

这就是我在 main.js 的每个行图中所拥有的：

Chart
    .fixedBarHeight(20)
    .height(nonEmpty.all().length * 20 + 1) 
    .margins({top: 0, right: 20, bottom: 0, left: 20})
    .width(600)
    .xAxis(d3.axisTop())
    .elasticX(true)
    .ordinalColors(['#e41a1c'])
    .gap(1)
    .dimension(Dim)
    .group(nonEmpty) //this removes the ones that don't match the filter of the other rowchart
    .on('pretransition', function () {
      Chart.select('g.axis').attr('transform', 'translate(0,0)');
      Chart.selectAll('line.grid-line').attr('y2', Chart.effectiveHeight());
    });

Answer 1

部分答案在这里。好吧，它回答了您的问题，但没有回答我期望的下一个问题。 :(

您目前正在根据柱数调整图表的大小，当柱数发生变化时您需要调整图表的大小。

这应该在 preRedraw 处理程序中完成，但不幸的是 preRedraw is currently fired after resizing is done。所以目前你必须覆盖 .redraw():

  dc.override(chart, 'redraw', function() {
    chart.height(chart.group().all().length * 21);
    return chart._redraw();
  })

关于将信息和控件放在图表之后，有两个问题，我只能解决其中一个。

dc.js 会将 svg 元素附加到图表 div。对此有更多控制会很好，但我不确定该怎么做。目前，最简单的解决方法是重新附加信息 div:

  chart.on('postRender', function() {
    chart.root().node().appendChild(chart.select('div.info').node())
  })

但是，您真正想要的可能是从滚动 div 中提取信息 div，我目前无法弄清楚。问题是图表期望 controls/info 位于图表 div 内，而这与需要滚动的图表相同。

我试着在图表 div 中添加另一个滚动 div，然后将 svg 移动到它下面。这可行，但它会产生一些烦人的闪烁。

Here's what I got so far。如果我想到更好的解决方案，我可能会 return 稍后再解决这个问题。

更新：滚动条外的控件

为了解决这个问题，我们需要图表外的控件div。

我们可以将 baseMixin.turnOnControls 移植到 filtered 事件处理程序，并执行与图表相同的显示和填充操作：

  function turnOnControls(_chart, controls) {
    var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
    controls.selectAll('.reset').style(attribute, null);
    controls.selectAll('.filter').text(dc.printers.filters(_chart.filters())).style(attribute, null);
  }

    function turnOffControls(_chart, controls) {
    var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
    var value = _chart.controlsUseVisibility() ? 'hidden' : 'none';
    controls.selectAll('.reset').style(attribute, value);
    controls.selectAll('.filter').style(attribute, value).text(_chart.filter());
  }

  function filter_function(controls) {
    return chart => {
    chart.hasFilter() ?
      turnOnControls(chart, controls) :
    turnOffControls(chart, controls);
    }
  }

  chart.on('filtered', filter_function(d3.select('#info')));

此外，controlsUseVisibility 和 visibility: hidden 更好，因为 shown/hidden 时控件会影响布局。

(fiddle)

是否可以滚动 div 以适应 dc.js 行图中的柱数

Is it possible to have a scrolling div that adjusts to the number of bars in a dc.js rowchart

data-visualization

d3.js

dc.js

更新：滚动条外的控件