创建具有多个域的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）：