nvd3 Bubble chart with log scale

北城余情 提交于 2019-12-20 02:46:13

问题


I am using NVD3 scatter/ Bubble chart. This is a continuation from the question here. I am plotting the log base 2 values for the y axis. But I want the y axis to have the original values as labels corresponding to the log base 2 scale. I am unable to understand how to do so.

Edit

This is what I have for plotting

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;
}

Now, the y axis ticks have the log2 values. I want to change the y axis ticks to have the original values displayed and not the log2 values.

Thanks,


回答1:


Instead of directly calculating the log when you create your data array, leave it as is and then use a log scale for your axis.

To use a custom scale in NVD3, you pass it as a parameter to the chart.yScale(scale) or chart.xScale(scale) methods.

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

Just don't try to use a log scale for y values in a bar or area chart, since those automatically include 0 in the domain (and you'll get errors if you try to plot anything at log(0)!)

A couple warnings:

  • Tick formating functions work different on log scales than for other scales; you'll probably want to just leave it as the default. See the docs (link above) for more info.

  • The .nice() method doesn't seem to work very effectively on log scales; when I was playing around on the NVD3 live code site, a domain of [1,99] was resulting in a final tick value of 98.999999999 on the axis. You may want to explicitly check that the domain starts and ends at round numbers.

Also note that since you're never actually dealing with the calculated values for the logs (just with the relative positions on the scale) you don't need to specify a base to the logarithm. The docs mention a logScale.base(number) method but that seems to be obsolete...



来源:https://stackoverflow.com/questions/23474319/nvd3-bubble-chart-with-log-scale

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!