Question

我正在将d3.scaleBand()与字符串域和十进制输出一起用于d3.js v4

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

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中有办法吗？

Answer 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))
})

<script src="https://d3js.org/d3.v5.min.js"></script>

PS：此解决方案将忽略秤中的任何填充物。

使用ScaleBand从范围获取域

1 个答案: