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

Question

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

我希望 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 .