D3绘制带对数刻度Y轴的面积图出现异常如何解决？

问题原因 #

你已经注意到对数刻度不支持0值的特性，但忽略了面积图的底边位置参数：你将d3.area的y0设置为y(0)，即使Y轴domain从1开始，调用y(0)时对数比例尺依然会返回无效的无穷值，导致面积路径的底边坐标计算出错，最终渲染异常。

linear、sqrt、pow等比例尺支持输入0值，所以y(0)可以返回有效的坐标值，只有对数比例尺不接受≤0的输入，因此仅在使用log刻度时会出现该问题。

解决方案 #

只需要将y0的取值改为对数比例尺domain下限对应的坐标即可，你当前Y轴domain下限为1，因此将y0(y(0))修改为y0(y(1))就可以正常渲染：

// 错误写法
.attr("d", d3.area()
  .x(function(d) { return x(d.date) })
  .y0(y(0))
  .y1(function(d) { return y(d.value) })
)

// 修正后写法
.attr("d", d3.area()
  .x(function(d) { return x(d.date) })
  .y0(y(1))
  .y1(function(d) { return y(d.value) })
)

为了避免后续调整Y轴domain时出现遗漏，建议将domain下限提取为变量统一维护：

// 统一维护Y轴domain下限
const yDomainMin = 1
var y = d3.scaleLog()
  .domain([yDomainMin, d3.max(data, function(d) { return +d.value; })])
  .range([ height, 0 ]);

// 面积部分直接引用变量
.attr("d", d3.area()
  .x(function(d) { return x(d.date) })
  .y0(y(yDomainMin))
  .y1(function(d) { return y(d.value) })
)

内容的提问来源于stack exchange，提问作者AnJ