javascript - 创建具有多个域的 d3.js 线性比例尺？

Question

是否可以创建具有多个域的 d3 线性标尺？

例如:将域 [16,21] 和 [6,10] 中的任何值映射到 [0,100] 范围的比例尺?

在此示例中，16 将映射到 0，17 将映射到 10，18 将映射到 20，19 将映射到 30，20 将映射到 40，21 将映射到 50，6 将映射到 60，7 将映射到 70 等。谢谢

Answer 1

一种方法是根据您的标准扩展内置线性刻度。例如:

var  domain1 = [16, 21],
     domain2 = [6, 10],
     range = [0, 100],
     midPoint = [50, 60];

function multiScale(inputNumber, domain1, domain2, range, midPoint) {
  var scale1 = d3.scale.linear().domain(domain1).range([range[0],midPoint[0]]),
      scale2 = d3.scale.linear().domain(domain2).range([midPoint[1], range[1]]);

  return (domain1[0] <= inputNumber && inputNumber <= domain1[1]) ? 
         scale1(inputNumber)  : scale2(inputNumber);
}

这是离散输入值的函数输出的可视化(参见 jsbin.com):