nvd3 带对数刻度的气泡图答案

【问题标题】：nvd3 Bubble chart with log scalenvd3 带对数刻度的气泡图
【发布时间】：2014-06-21 20:43:55
【问题描述】：

我正在使用 NVD3 散点图/气泡图。这是问题here 的延续。我正在绘制 y 轴的 log base 2 值。但我希望 y 轴将原始值作为与 log base 2 比例相对应的标签。我不明白该怎么做。

编辑

这就是我要绘制的东西

data[i].values.push({
    x: random()
  , y: log2(yValue)
  , size: Math.random()
  });

function log2(val) {
console.log("val = " + val + " : " + Math.log(val) / Math.LN2)
    return Math.log(val) / Math.LN2;
}

现在，y 轴刻度具有 log2 值。我想更改 y 轴刻度以显示原始值而不是 log2 值。

谢谢，

【问题讨论】：

请把你目前拥有的东西放在小提琴或plunker中。你肯定会增加你的问题得到回答的机会。

标签： javascript d3.js scale scatter-plot nvd3.js

【解决方案1】：

创建数据数组时不要直接计算日志，而是保持原样，然后为轴使用log scale。

要在 NVD3 中使用自定义比例，请将其作为参数传递给 chart.yScale(scale) 或 chart.xScale(scale) 方法。

var chart = nv.models.lineChart()
      .yScale( d3.scale.log() );

不要尝试对条形图或面积图中的 y 值使用对数刻度，因为它们会自动在域中包含 0（如果您尝试在 log(0) 处绘制任何内容，则会出现错误！）

几个警告：

刻度格式化函数在对数刻度上的工作方式与其他刻度不同；您可能只想将其保留为默认值。有关详细信息，请参阅文档（上面的链接）。
.nice() 方法在对数刻度上似乎不是很有效；当我在 NVD3 实时代码站点上玩耍时，[1,99] 的域导致轴上的最终刻度值为 98.999999999。您可能需要明确检查域是否以整数开头和结尾。

另外请注意，由于您实际上从未处理日志的计算值（仅处理比例尺上的相对位置），因此您无需指定对数的底数。文档中提到了logScale.base(number) method，但这似乎已经过时了......

【讨论】：