【问题标题】:Horizon chart not visible when using d3.scale.log()使用 d3.scale.log() 时地平线图表不可见
【发布时间】:2012-08-12 17:41:23
【问题描述】:

我已经使用默认的线性比例成功绘制了水平线图,它们看起来很棒。不幸的是,当我尝试使用 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);

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

【问题讨论】:

    标签: javascript charts scale d3.js


    【解决方案1】:

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

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

    【讨论】:

    • 谢谢迈克。我知道 log(0) 是 -Infinity,但似乎对数刻度对于显示范围较大的数据仍然非常有用。我想我真正想要的是 log(x+1),所以 scale(0) 返回 0。我试图通过设置域来做到这一点,但显然在比例完成后会应用。你认为简单地修改我系统上的 scale 函数有意义吗?
    • 于是我新建了一个函数d3.scale.logPlus1(),和d3.scale.log()一模一样,只是scale函数返回linear(log(x+1) ) 而不是线性(log(x))。我看到的是线性函数总是返回 NaN,即使 log 函数返回我所期望的。或者这只是一个坏主意,我需要使用 sqrt(这可行,但人们更习惯于使用对数刻度而不是 sqrt 刻度)?
    • 问题是使用对数刻度时曲线下的面积没有意义。如果你想要一个对数刻度,你应该使用折线图而不是水平图。
    • 我同意 Mike 的观点,简单地切换到对数刻度在这里没有意义。但是,将图表以对数方式分成多个波段,同时在每个波段内仍然使用线性刻度,这是非常有意义的。这是一个例子:jsfiddle.net/ilyabo/9ck5q/4
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-12
    • 1970-01-01
    相关资源
    最近更新 更多