D3.js入门之比例尺的使用与绘制

const scale = d3.scaleLinear() // 连续输入和连续输出
.domain([0, 500]) // 输入域 0 ~ 500
.range([0, 300]); // 输出域 0 ~ 300

console.log(scale(100)) // 60
console.log(scale(300)) // 180
console.log(scale(500)) // 300

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

console.log(scale(1)) // 0
console.log(scale(3)) // 50
console.log(scale(4)) // 75

console.log(scale.bandwidth()) // 25 (100 分为4份，每份25(柱状图宽度))

const scale = d3.scaleTime()
  .domain([new Date(2022, 0, 1), new Date(2022, 0, 31)])
  .range([0, 30])

console.log(scale3(new Date(2022, 0, 15))) // 14

const scale = d3.scaleOrdinal() // 离散输入和离散输出
  .domain(['jack', 'rose', 'john', 'lucy'])
  .range([10, 20, 30])
console.log(scale("jack")); // 10
console.log(scale("lucy")); // 10
console.log(scale("rose")); // 20
console.log(scale("john")); // 30

console.log(scale("finget")) // 20 输入域以外的值

const scale = d3.scaleOrdinal()
  .domain(['jack', 'rose', 'john', 'lucy'])
  .range([10, 20, 30])
  .unknown(23) // 指定未知输入域的输出值
console.log(scale("finget"))  // 23

// 创建从一组离散值映射到指定范围内等距的点
const scale = d3.scalePoint() // 离散输入和离散输出
  .domain(['jack', 'rose', 'john']) 
  .range([0, 100])
console.log(scale4('jack')) // 0
console.log(scale4('rose')) // 50
console.log(scale4('john')) // 100

console.log(scale4.step()) // 访问点之间的距离 50

// scaleThreshold 将连续数值输入映射到范围定义的离散值
let scaleThreshold = d3.scaleThreshold() // 连续输入和离散输出
  .domain([0, 10, 20])
  .range(['small', 'medium', 'large', 'xlarge'])
console.log(scaleThreshold(5)) // medium
console.log(scaleThreshold(15)) // large
console.log(scaleThreshold(25)) // xlarge
console.log(scaleThreshold(35)) // xlarge
console.log(scaleThreshold(45)) // xxlarge

// invertExtent 返回输出域中的值 value 对应的输入范围
console.log(scaleThreshold.invertExtent('small')) // [Infinity, 0]
console.log(scaleThreshold.invertExtent('medium')) // [0, 10]
console.log(scaleThreshold.invertExtent('large')) // [10, 20]
console.log(scaleThreshold.invertExtent('xlarge')) // [20, Infinity]

const scale = d3.scaleQuantize() // 连续输入和离散输出
    .domain([0, 10])
    .range(['red', 'green', 'blue', 'pink'])

console.log(scale(-1)) // red
console.log(scale(2)) // red
console.log(scale(8)) // pink
console.log(scale(20)) // pink

console.log(scale.invertExtent('red')) // [0, 2.5]
console.log(scale.invertExtent('green')) // [2.5, 5]
console.log(scale.invertExtent('blue')) // [5, 7.5]
console.log(scale.invertExtent('pink')) // [7.5, 10]

d3.schemeCateGory10
d3.schemeAccent
d3.schemeDark2
d3.schemePaired
d3.schemePastel1
d3.schemePastel2
d3.schemeSet1
d3.schemeSet2
d3.schemeSet3

// 定义一个序数颜色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)
console.log(color(1)) // #1f77b4

d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 类似scaleSqrt的乘方比例尺
d3.scaleLog() // 对数比例尺
d3.scaleQuantile() // 分位数比例尺