D3:Ordinal Scales & Band Scales

日期：2020-10-12
作者：18届 WRZ
标签：数据可视化

一.序数比例尺Ordinal Scales

序数比例尺的输入域和输出域都是离散的。它可以将输入域的值按照数据集中数据的顺序分别映射到输出域中。首先我们来定义一个序数比例尺

 var scale=d3.scale.Ordinal()
                   .domain(d3.range(3))
                   .range(["a","b","c"]);
 console.log(scale(0));

那么问题来了，此时打开浏览器的控制台

查阅官方文档后发现从D3 v4开始序数比例尺的定义已经不支持如上写法。其正确写法应为

 var scale=d3.scaleOrdinal()
              .domain(d3.range(3))
              .range(["a","b","c"]);
 console.log(scale(0));

执行后可以在控制台得到如下结果

• ordinal.domain()
  如果指定了 domain 则将输入域设置为指定的数组。输入域中的元素次序与输出域中的元素次序一一对应。输入域在内部以字符串到索引的映射形式存储；索引值用来进行进行输出检索。因此，序数比例尺的值必须为字符串或者能被强制转为字符串的类型，并且必须唯一。

  var scale=d3.scaleOrdinal()
               .domain([1,1,2])
               .range(["a","b","c"]);
  console.log(scale(1));

此时控制台上显示的值仍为a，但其实1也可以映射到b，但是xScale(1)并不能区分这个1到底指代的是输入域中的哪个值。因此输入域中的值一定要是唯一的。
还应当注意的是在D3 V4中序数比例尺中不再支持rangeBands()和rangeRoundBands()方法。为了达到原来的效果，需要用到另外一种比例尺

二.分段比例尺Band Scales

分段比例尺的输入域仍然是离散的，但是输出域可以是连续的。分段比例尺的输出仍为离散的，离散的输出值是通过将连续的范围划分为均匀的分段。

现在来定义一个分段比例尺

            var scale=d3.scaleBand()
                        .domain([0,1,2,3])
                        .range([0,100]);
            console.log(scale(1));
            console.log(scale(2));
            console.log(scale(3));

此时控制台的结果如下：

• band.rangeRound()方法
  将连续范围划分为均匀的分段，并且每一个分段的起点和终点都是整数。
• band.paddingInner()和band.paddingOuter()
  取值范围为[0,1]，表示间隔比例