打造丰富色彩的离散型比例尺：D3.js 带您畅游数据之海

2023-09-17 23:11:13

D3.js 比例尺：让数据焕发生机

什么是比例尺？

比例尺是将抽象数据转换为可视属性的强大工具。D3.js 库提供了丰富的比例尺类型，让您可以将离散数据轻松映射到连续范围，从而创建信息丰富的图表。

比例尺类型

序数型比例尺

序数型比例尺保留数据的顺序关系，将数据值映射到颜色范围。这非常适合需要对数据进行排名或比较的情况。

// 创建序数型比例尺
var colorScale = d3.scaleOrdinal()
  .domain(["low", "medium", "high"])
  .range(["#ff0000", "#ffff00", "#00ff00"]);

分类型比例尺

分类型比例尺将数据值映射到独特的颜色，不考虑数据之间的顺序关系。这适用于强调数据差异的情况。

// 创建分类型比例尺
var colorScale = d3.scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(["#ff0000", "#ffff00", "#00ff00"]);

名义型比例尺

名义型比例尺也为数据值分配独特的颜色，但不会赋予它们任何顺序或含义。这适用于需要突出显示数据差异，而无需考虑其含义的情况。

// 创建名义型比例尺
var colorScale = d3.scaleOrdinal()
  .domain(["red", "green", "blue"])
  .range(["#ff0000", "#00ff00", "#0000ff"]);

调色板

D3.js 提供了预定义的调色板，让您可以轻松选择更丰富的颜色组合。

// 使用调色板创建序数型比例尺
var colorScale = d3.scaleOrdinal()
  .domain(["low", "medium", "high"])
  .range(d3.schemeCategory10);

示例代码

代码段 1：序数型比例尺

// 创建序数型比例尺
var colorScale = d3.scaleOrdinal()
  .domain(["low", "medium", "high"])
  .range(["#ff0000", "#ffff00", "#00ff00"]);

// 使用比例尺映射数据
var colors = colorScale(["low", "medium", "high"]);

// 输出：["#ff0000", "#ffff00", "#00ff00"]

代码段 2：分类型比例尺

// 创建分类型比例尺
var colorScale = d3.scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(["#ff0000", "#ffff00", "#00ff00"]);

// 使用比例尺映射数据
var colors = colorScale(["A", "B", "C"]);

// 输出：["#ff0000", "#ffff00", "#00ff00"]