D3.js Diverging Scales API 完整参考

D3.js是一个流行的JavaScript库，它提供了各种丰富的API来帮助开发者创建交互式的数据可视化。其中一个非常有用的API是Diverging Scales，它使得开发者可以轻松地创建Diverging Scales（分散比较）。

什么是Diverging Scales？

Diverging Scales是一种用于可视化比较两个对立面的数据的比例尺。该比例尺有两个中心，它们位于两个对立面的数据之间。在比例尺中间的值表示相等的两个对立面的数据。

如何使用Diverging Scales API?

使用Diverging Scales API需要以下步骤：

1. 创建比例尺对象
2. 配置比例尺对象
3. 使用比例尺对象以及其他一些API来创建可视化效果

创建比例尺对象

以下代码示例展示如何使用D3.js的标准方式创建比例尺对象：

const scale = d3.scaleDiverging();

配置比例尺对象

以下代码示例展示如何配置比例尺对象：

const domain = [0, 50, 100];
const range = ["red", "white", "green"];

const scale = d3.scaleDiverging()
    .domain(domain)
    .range(range);

使用比例尺对象以及其他一些API来创建可视化效果

以下代码示例展示如何使用比例尺对象及其他API来创建可视化效果：

const data = [...]
const domain = [0, 50, 100];
const range = ["red", "white", "green"];

const scale = d3.scaleDiverging()
    .domain(domain)
    .range(range);

const rects = d3.select("svg")
    .selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
        .attr("x", (d, i) => i * 50)
        .attr("y", 0)
        .attr("width", 50)
        .attr("height", 50)
        .attr("fill", d => scale(d));

以上示例代码创建了一个带有三种颜色的比例尺对象，并使用该比例尺对象将数据映射到不同颜色的矩形上。

API参考

d3.scaleDiverging()

创建一个新的diverging比例尺。

diverging(domain: Array<number>, range: Array<string | [number, number, number]>): scale

配置刚刚创建的比例尺对象的domain和range属性。

• domain: 数据范围。一个数组，其中只有三个值，第一个和第三个值是极端值，第二个值是中间值。
• range: 颜色范围。一个数组，其中包含三个颜色，第一个和第三个颜色分别对应于极端值，并且中间的颜色与中间的domain值相对应。

scale(x: number): string

使用比例尺将输入的值x映射到颜色范围中。

结论

D3.js Diverging Scales API是一个非常有用的API，它可以帮助开发者创建分散的比较可视化图表。要使用它，只需创建一个比例尺对象，配置它的属性，将数据使用它映射到颜色值上。

参考资料

• D3.js Diverging Scales API