D3.js Quantize Scales API 完整参考

D3.js的Quantize Scales API是一组用于将连续的数据值映射到离散颜色值的比例尺函数。本文将为您介绍Quantize Scales API的使用方法和参数。

创建Quantize Scales

通过调用d3.scaleQuantize()函数可以创建一个Quantize Scales。它需要两个参数：数据值的最小值和最大值。

const scale = d3.scaleQuantize()
  .domain([0, 100])
  .range(['red', 'yellow', 'green']);

上面的代码创建了一个Quantize Scales，它将0到100之间的值映射成红、黄、绿三种颜色。当输入值在[0, 33.33)之间时，输出为"red"；在[33.33, 66.67)之间时，输出为"yellow"；在[66.67, 100]之间时，输出为"green"。

Quantize Scales API参数

scale.domain([values])

• values: 一个数组，表示数据值的范围。

设置或获取输入域。例如，scale.domain([0, 100])将输入域设置为0到100之间的值。

scale.range([values])

• values: 一个数组，表示输出范围。

设置或获取输出范围。例如，scale.range(['red', 'yellow', 'green'])将输出为三种颜色。

scale.invertExtent(value)

• value: 范围内的输出值。

返回数据值的范围，其中指定的输出值属于。例如，scale.invertExtent('yellow')将返回[33.33, 66.67]。

scale.quantiles()

返回阈值，用于将连续的值映射到离散的颜色值。例如，如果你的输出范围是["red", "yellow", "green"], 则返回值为[33, 66]。

示例

下面是一个例子，它创建了一个Quantize Scales，并将它应用到一个矩形上。

const data = [4, 6, 8, 10, 12, 14, 16, 18, 20];
const scale = d3.scaleQuantize()
  .domain(d3.extent(data))
  .range(['red', 'yellow', 'green']);

d3.select('svg')
  .append('rect')
  .attr('width', 100)
  .attr('height', 100)
  .attr('fill', scale(8));

上面的代码将创建一个Quantize Scales，它将输入域设置为[4, 20]之间的值，并将输出范围设置为"red", "yellow", "green"三种颜色。然后创建一个100x100像素的矩形，并将填充颜色设置为插值的颜色。

总结

以上就是D3.js Quantize Scales API的使用和参数介绍。通过使用Quantize Scales API，您可以很容易地将连续的数据值映射到离散的颜色值，从而创建出漂亮的可视化效果。