d3.js - d3 对数刻度 : base not making an effect?

标签 d3.js

我觉得这可能只是我误解了对数刻度的工作原理,但我似乎无法让 D3 对数刻度基工作。

this fiddle ,我尝试使用同一组 base10 刻度创建三个刻度,分别是 base10 对数刻度、base4 对数刻度和 base2 对数刻度。根据我对对数刻度的外行理解,以 10 为底的对数刻度看起来是正确的——10 的幂在轴上等距分布。但是,base4 和 base2 比例是相同的 - 在我看来,标签应该在这两个比例上压缩到右侧。这是怎么回事?

繁琐的代码:

ticks = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000]
elems = { ten: 10, four: 4, two: 2 }

for selector, base of elems
  dom = d3.select('.scale.' + selector)
  scale = (new d3.scale.log()).base(base).domain([ 0.5, 10000000 ]).range([ 0, 500 ])

  dom.selectAll('div')
    .data(ticks)
    .enter().append('div')
      .text((x) -> x)
      .style('left', (x) -> scale(x) + 'px')

最佳答案

在我看来,base() 方法有点用词不当。它实际上是一个 displayBase 方法,因为它只更新刻度的位置和标签。

比例尺使用范围设置来发挥其魔力。这是一种在许多不同规模上都非常一致的做事方式,但对于日志来说,它有点不直观。

尴尬的方法:在您的情况下,修改域数组的上限值。例如,如果范围为 [0, 1000],则 log-base10 的域应为 [1, 3],log-base2 的域应为 [0, 9.9658(大约)]。一般来说,顶级域值是顶级范围值的log(base-x)。如果底部范围值高于 0,则同上。

更简单的方法:将范围保留为[0,1]。然后你可以将域设置为[1,base]。比例尺负责范围值之外的插值。

关于d3.js - d3 对数刻度 : base not making an effect?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28289719/

相关文章:

javascript - R Shiny 的AngularJS工作

javascript - 我们怎样才能减少两条边之间的距离?

d3.js - d3js : make new parent data descend into child nodes

javascript - Raphaël 的问题以及删除 svg 中的对象

python - 如何使用 Python 设置本地 HTTP 服务器

javascript - 在渲染 d3 svg 对象之前更改 Bootstrap 按钮文本

javascript - 定向网络中的网络连接衰减 - d3js

javascript - 部队布局中的永动机

javascript - 在水平条形图上旋转 x 轴文本

javascript - 如何获取相对于页面上 SVG 位置的 SVG 子元素位置,D3.js?