具有rangeChart的elasticY（true）无法适应新范围

Question

我刚从基于example的dc.js开始，并根据自己的数据对其进行了调整。

我希望y轴根据预览范围图的选择进行调整。为此，我在主图表中添加了elasticY(true)。 如果在示例中执行此操作，它将按预期方式工作（see codepen），但是，如果我使用调整后的代码（see codepen），则y轴根本不会调整。

var chart = dc.lineChart("#chart")
var rangeChart = dc.lineChart("#range-chart")
var domain = [data[0].date, data.slice(-1)[0].date]
var dimension = crossfilter(data).dimension(function(d) {
   return d.date;
})
var group = dimension.group().reduceSum(function(d) {
   return d.value;
});

rangeChart
  .height(80)
  .dimension(dimension)
  .group(group)
  .x(d3.scaleTime().domain(domain))
  .xUnits(d3.timeDay)
  .render();

chart
  .height(220)
  .dimension(dimension)
  .group(group)
  .rangeChart(rangeChart)
  .x(d3.scaleTime().domain(domain))
  .xUnits(d3.timeDay)
  .brushOn(false)
  .mouseZoomable(true)
  .zoomScale([1, 100])
  .zoomOutRestrict(true)
  .renderVerticalGridLines(true)
  .elasticY(true)
  .transitionDuration(100)
  .render();

Answer 1

如果在图表的最左侧放大，则会看到它正在自动调整Y域的顶部，而不是底部。

该问题在GitHub问题Stack mixin charts' y-domain is always [0, n] when elasticY(true)中进行了描述。

这是值得商bat的，这是此处的最佳行为，因为标准建议是在图表中显示0以免夸大。它们都是有效的，因此，如果我们进行了更改，我们仍然必须提供[0,n]行为作为选项。

此问题提供了一种解决方法：

function nonzero_min(chart) {
  dc.override(chart, 'yAxisMin', function () {
    var min = d3.min(chart.data(), function (layer) {
      return d3.min(layer.values, function (p) {
        return p.y + p.y0;
      });
    });
    return dc.utils.subtract(min, chart.yAxisPadding());
  });
  return chart;
}
nonzero_min(chart);

将其应用于图表，实际上会显示更多细节，因此在这里是一个不错的选择：

Fork of your pen。