javascript - 使用 d3.scale.log() 时地平线图不可见

Question

我已经使用默认的线性比例成功绘制了水平线图，它们看起来很棒。不幸的是，当我尝试使用 d3.scale.log() 缩放器时，图表永远不会出现；没有错误，什么都没有。我曾认为问题在于输入数据中的零，但即使我的指标返回单个非零值，也会发生这种情况。这是一个例子：

context = cubism.context(), horizon = context.horizon();
horizon.scale(d3.scale.log());
var flatMetric = context.metric(function(start, stop, step, callback) {
  var values = [];

  // convert start & stop to milliseconds
  start = +start;
  stop = +stop;

  while (start < stop) {
    start += step;
    values.push(10);
  }

  callback(null, values);
});
d3.select("body").selectAll(".horizon")
  .data([flatMetric]).enter().append("div")
  .attr("class", "horizon")
  .call(horizon);

如果我只是用线性刻度替换对数刻度，一切正常。

Answer 1

面积图（其中水平图是一种特殊情况）在对数刻度上没有意义：零是无穷大。在实践中，这表现为渲染错误，因为坐标是 ±Infinity 或 NaN。

如果要使用对数刻度，则需要不带零基线的不同图表类型，例如折线图。比较图表也可能有效。如果您想保留水平图表并且不想使用线性刻度，请尝试使用 sqrt（或更一般地，pow）刻度。