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

Question

我刚开始 dc.js 基于这个 example 我用我的数据调整了它。

我要根据预览范围图的选择调整 y 轴。为此，我在主图表中添加了 elasticY(true)。如果我在示例中这样做，它会按预期工作 (see codepen), however, if I use my adjusted code (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.

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

elasticY(true) with rangeChart does not adapt to new range

javascript

d3.js

dc.js