javascript - elasticitY(true) with range Chart 不适应新范围

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) .

这里的最佳行为是有争议的，因为标准建议是在图表中显示 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 .