line is drawn in middle of chart when Y axis domain is [0, 0]

[ajperez81]

In a line chart, when all the data points have a zero value, I would expect them to show at the bottom, like this:

That's the way dc.js works with d3 5.7.0 or lower. In d3 5.8.0 they "fixed" the way that scales map the value when the domain is collapsed (d3/d3-scale#117). Now it shows like this instead:

I guess it could make sense if all the points had a value of 42, for instance. But when all of them are 0, it just looks weird.

Is there any way to workaround this issue, using dc.js, without having to redefine the Y axis domain myself?

This is the code I used for the examples, it's available also at codepen:

const data = [
  {day: 1, total: 0},
  {day: 2, total: 0}
];
const ndx = crossfilter(data);
const dim = ndx.dimension(d => d.day);
const grp = dim.group().reduceSum(d => d.total);
dc.lineChart('#chart')
  .dimension(dim)
  .group(grp)
  .width(500)
  .height(150)
  .x(d3.scalePoint().domain([1, 2]).range([0, 500]))
  .render();

[gordonwoodhull]

Huh, I'd noticed charts doing this but I hadn't narrowed it down to a change in D3.

I agree, it's annoying, but since you have to tell D3 a domain when it would otherwise, be empty, I can't think of anything simpler than preRender/preRedraw hooks:

chart
  .on('preRender', keep_ydomain_nonempty)
  .on('preRedraw', keep_ydomain_nonempty)

function keep_ydomain_nonempty(chart) {
  const min = chart.yAxisMin();
  if(min === chart.yAxisMax())
    chart.elasticX(false).y(d3.scaleLinear().domain([min, min+1]));
  else
    chart.elasticX(true);
}

Unfortunately this causes the Y axis to have a lot of useless ticks, which you'd probably have to weed out with more special cases:

fork of your codepen

I hope there is a better way.