javascript - d3 堆积面积图不适用于对数刻度

Question

我已经能够制作出堆积面积图。 请参阅this fiddle ，它使用虚拟数据。但是，我想将 y 轴实现为对数刻度。但是当我改变线路时

var y = d3.scale.linear()
          .range([HEIGHT, 0]);

到

var y = d3.scale.log()
          .range([HEIGHT, 0]);

我的图表停止渲染，并出现类似错误

d3.v3.min.js:1 Error: Invalid value for attribute d="M0,NaNQ400,NaN,500,NaNQ600,NaN,1000,NaNL1000,NaNQ600,NaN,500,NaNQ400,NaN,0,NaNZ".

我不知道我哪里出了问题。有人可以帮忙吗？

Answer 1

查看 Log Scales 上的文档:

As log(0) is negative infinity, a log scale must have either an exclusively-positive or exclusively-negative domain; the domain must not include or cross zero.

您需要确保您的域不包含零值。将其设置为一些较小的值就足够了:

y.domain([1e-6, d3.max(data, function(d) { return d.y0 + d.y; })]);

查看更新后的JSFiddle一个工作示例。