学习过程中用到的比例尺总结

在学习d3、写Demo时用到过一些比例尺,但是总是用了就忘,记不住它们的用处,分辨不出什么场景适合用哪种比例尺。于是整理一篇文章记录它们的用处与用法。

scaleLinear()

线性比例尺,最基础常见的比例尺。会将连续的 domain与连续的 range以线性的关系对应输出

const scaleLinear = d3.scaleLinear().domain([0, 10]).range([0, 100])

scaleLinear(0) // 0
scaleLinear(2) // 20
scaleLinear(5) // 50

如果用普通 javascript代码来描述其行为的话,大致应该是

const getScaleLinear = (input, output) => {
  const min = input[0]
  const max = input.slice(-1)[0]
  const minOutput = output[0]
  const maxOutput = output.slice(-1)[0]

  return (v) => (v - min) / (max - min) * (maxOutput - minOutput)
}

其映射关系图如下

ScaleLinear

scaleBand()

不连续的 domain与连续的 range进行映射。会将 range依据 domain的个数进行分段。不知道应该如何最标准的翻译,直接上Demo吧。

const scaleBand = d3.scaleBand().domain([0, 1, 2, 3]).range([0, 100]);

scaleBand(0); // 0
scaleBand(1); // 25
scaleBand(2); // 50
scaleBand(3); // 75

scaleBand(4); // undefined <----
scaleBand(8); // undefined

可以观察到,输入的值必须在 domain中被定义才能得到输出

  1. 0, 1, 2, 3均被定义过,所以输出不是 undefined
  2. 4, 8未被定义,所以输出是 undefined

翻译成 javascript代码应该是

const getScaleBand = (input, output) => {
  const count = input.length
  const minOutput = output[0]
  const maxOutput = output.slice(-1)[0]
  const step = (maxOutput - minOutput) / count

  return (v) => {
    const index = input.indexOf(v)
    return index === -1 ? undefined : index * step + minOutput
  }
}

其映射关系图如下

ScaleBand

scalePoint()

scaleBand()一样,也是不连续的 domain与连续的 range之间的映射。与 scaleBand()不同的是,scalePoint()domain的最大/最小值是与 range中的最大/最小值对应的。domain中剩余的值会与 range中相应的值进行对应。

const scalePoint = d3.scalePoint().domain([0, 1, 2, 3]).range([0, 100]);

scalePoint(0); // 0
scalePoint(1); // 33.33333
scalePoint(2); // 66.66666
scalePoint(3); // 100

其映射关系图如下

scalePoint

scaleOrdinal

scaleOrdinalscaleBand更进一步,是不连续的 domain与不连续的 range之间的对应关系。

const scaleOrdinal = d3.scaleOrdinal().domain([0, 1, 2, 3]).range(['北京', '上海', '广州', '深圳'])

scaleOrdinal(0); // 北京
scaleOrdinal(1); // 上海
scaleOrdinal(2); // 广州
scaleOrdinal(3); // 深圳

scaleOrdinal(4); // 北京 <---

可以观察到,当输入 domain中不存在的值时,scaleOrdinal会自动寻找对应的值

其映射关系图如下

scaleOrdinal

未完待续

目前我只接触到了上述4种比例尺,如果以后遇到了新的比例尺也会继续在这里更新。

我的d3学习仓库,包含了一些常见图表的Demo

添加新评论