D3.js 是否可以使用滚动div来调整dc.js行图表中的条数

我有几个用dc.js相互连接的行图。 如前所述，这些行图的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>

---

这里是部分答案。嗯，它回答了你的问题，但没有回答我想问的下一个问题(

您当前正在根据条形图的数量调整图表的大小，当条形图的数量发生变化时，您需要调整图表的大小

这应该在

预重画

处理程序中完成，但不幸的是。因此，当前必须重写

.redraw（）

：

至于把信息和控制放在图表后面，有两个问题，我只能解决其中一个

dc.js将在chart div中添加一个

svg

元素。如果能够更好地控制它，那就好了，但我不知道该怎么办。目前，最简单的解决方法是重新添加info div：

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

但是，您真正想要的可能是将info div从滚动div中拉出来，我目前无法理解。问题是图表希望控件/信息位于图表div中，而这正是需要滚动的控件/信息

我试图在chart div中添加另一个滚动div，然后将svg移到它下面，这样做很有效，但会产生一些恼人的闪烁

.如果我想一个更好的解决办法，我可能会在以后再讨论这个问题

更新：滚动条外的控件 为了正确解决这个问题，我们需要chart div之外的控件

我们可以移植到

过滤的
事件处理程序，并执行与图表相同的显示和填充操作：

  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')));


另外，当控件在显示/隐藏时会影响布局时，
visibility:hidden
更好

谢谢你的详细回答。我认为更容易解决的问题似乎变得更难了。你认为有没有办法将重置控件放在轴div上方，而不是放在末尾？或者无论位置如何，问题都是一样的？这是同样的问题。图表将仅在chart div中显示/隐藏控件。这两个位置都在外部。我认为最简单的方法可能是侦听预重画或预转换事件，然后根据是否存在chart
.filters（）隐藏/显示控件
为空。如果您不先弄清楚，我可以在几天内创建一个示例。我用代码更新了控件，将其移到scroller div之外。
  chart.on('postRender', function() {
    chart.root().node().appendChild(chart.select('div.info').node())
  })

  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')));