d3.js-插值器

发表于

更新于

阅读量

安装使用npm i d3 --save

两种颜色线性插值

调用方法d3.interpolateRgb，返回一个插值器（函数），输入值为0~1

javascript

var s = d3.interpolateRgb('#DC143C', "#00FF7F")
for (var i = 0; i < 100; i++) {
	var Odiv = document.createElement('div')
	Odiv.style.backgroundColor = s(i / 100)
	document.querySelector('body').appendChild(Odiv)
}

值域与颜色映射

调用方法d3.scaleLinear() ，返回一个插值器（函数）,输入值为定义域内中值

javascript

  var scale = d3.scaleLinear().domain([0, 100, 200]).range(["red", "yellow", "green"]);
  for (var i = 0; i < 200; i++) {
    var Odiv = document.createElement('div')
    Odiv.style.backgroundColor = scale(i)
    document.querySelector('body').appendChild(Odiv)
  }

数值域与数值域映射

javascript

  var numberScale = d3.scaleLinear().domain([0, 100, 200])
    .range([100,200,500]);
  console.log(numberScale.invert(400))

d3自定义颜色-schema

用于定量，序数和分类比例尺的颜色渐变和调色板

Categorical

Diverging

Sequential (Single Hue)

Sequential (Multi-Hue)

Cyclical

d3.interpolateRainbow - the “less-angry” rainbow
d3.interpolateSinebow - 正弦顺滑的彩虹

d3.js-插值器 ​

两种颜色线性插值 ​

值域与颜色映射 ​

数值域与数值域映射 ​

d3自定义颜色-schema ​

Categorical ​

Diverging ​

Sequential (Single Hue) ​

Sequential (Multi-Hue) ​

Cyclical ​

d3.js-插值器

两种颜色线性插值

值域与颜色映射

数值域与数值域映射

d3自定义颜色-schema

Categorical

Diverging

Sequential (Single Hue)

Sequential (Multi-Hue)

Cyclical