D3.js scaleDiverging()函数介绍

D3.js中的scaleDiverging()函数是用于创建一个分散型（diverging）比例尺（scale）的函数。分散型比例尺是用于表示分散型数据的，它将输入域（input domain）中间的值映射到输出域（output range）中间的值，同时将输入域两端的值映射到输出域两端的值。

语法

d3.scaleDiverging()

返回值

函数

用法

以下是一个使用scaleDiverging()函数创建分散型比例尺的实例：

var divergingScale = d3.scaleDiverging()
    .domain([-10, 0, 10])
    .range(["blue", "white", "red"]);

上面的代码将创建一个分散型比例尺，输入域为[-10,0,10]，输出域为['blue', 'white', 'red']，该比例尺可用于将输入域中间的值映射到输出域中间的值，将输入域两端的值映射到输出域两端的值。

下面是一个将分散型比例尺应用于数据可视化的例子：

var dataArray = [1, 5, -3, -7, 12];

var svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500);

var divergingScale = d3.scaleDiverging()
  .domain([-10, 0, 10])
  .range(['blue', 'white', 'red']);

svg.selectAll('rect')
  .data(dataArray)
  .enter().append('rect')
  .attr('x', function(d, i) {
    return i * 50;
  })
  .attr('y', 250)
  .attr('width', 40)
  .attr('height', function(d) {
    return Math.abs(divergingScale(d) - divergingScale(0));
  })
  .attr('fill', function(d) {
    return divergingScale(d);
  });

上面的代码将创建一个包含5个矩形元素的svg图形，每个矩形元素宽度为40像素，高度根据输入数据的值使用分散型比例尺进行计算得到，颜色也使用分散型比例尺进行映射得到。

链式调用

scaleDiverging()函数还支持链式调用，可以在调用函数时一次性指定输入域、输出域，也可以使用其它一些比例尺函数，如下所示：

var divergingScale = d3.scaleDiverging().domain([-10,0,10]).range(["blue", "white", "red"]);

// 等价于

var divergingScale = d3.scaleDiverging().domain([-10,0,10])
                                         .interpolator(d3.interpolateRgbBasis(["blue", "white", "red"]));

// 也等价于

var linearScale = d3.scaleLinear().domain([-10,0,10]).range([0,1]);
var divergingScale = d3.scaleSequential().domain([-1,0,1]).interpolator(d3.interpolateRgb("blue", "white", "red")).piecewise(d3.piecewise(d3.identity, [-10, 0, 10]));

参考链接

• D3 API Reference