使用 ScaleBand 从范围获取域答案

【问题标题】：Get domain from range using ScaleBand使用 ScaleBand 从范围获取域
【发布时间】：2018-08-06 16:46:11
【问题描述】：

我在 d3.js v4 中使用带有字符串域和十进制输出的 d3.scaleBand()

我有兴趣从范围十进制值中检索“键”。

var xscale = d3.scaleBand() // v4
  .domain(["a","b","c","d","e"])
  .range([0, 5])

console.log(xscale("c")) // return 2
console.log(xscale.magicfunction(2)) // return c

有没有办法在 d3 中做到这一点？

【问题讨论】：

stackoverflow.com/a/50846323/9938317

标签： javascript d3.js

【解决方案1】：

D3 序数尺度没有invert 方法，但您可以创建自己的方法。

当我看到一个使用scaleQuantile 的聪明替代方案时，大致如下：

xscale.invert = function(x) {
    var domain = this.domain();
    var range = this.range()
    var scale = d3.scaleQuantize().domain(range).range(domain)
    return scale(x)
};

那么，在你的情况下，只需使用：

console.log(xscale.invert(2)) // returns c

这是一个演示：

var xscale = d3.scaleBand() // v4
  .domain(["a", "b", "c", "d", "e"])
  .range([0, 5]);

xscale.invert = function(x) {
  var domain = this.domain();
  var range = this.range()
  var scale = d3.scaleQuantize().domain(range).range(domain)
  return scale(x)
}

d3.range(0, 5.2, 0.2).forEach(function(d) {
  console.log(d.toFixed(2) + " corresponds to: " + xscale.invert(d))
})

&lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;

PS：此解决方案将忽略您在比例中的任何填充。

【讨论】：