javascript - 带 rangeChart 的 elasticY(true) 不适应新范围

Question

我刚刚根据这个示例开始使用 dc.js ，并使用我的数据对其进行了调整。

我希望 y 轴根据预览范围图的选择进行调整。为了做到这一点，我添加elasticY(true)到主图表中。如果我在示例中执行此操作，它会按预期工作（请参阅 codepen），但是，如果我使用调整后的代码（请参阅 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();

标签： javascriptd3.jsdc.js

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

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

你的笔叉。