antv-l7/scale.zh.md at master

6.6 KiB

Raw Permalink Blame History

title	order
Scale 度量	2

Scale 简介

Scale 度量是用于将地图数据值（数字、日期、类别等数据）转成视觉变量（颜色、大小、形状）。Scale 是数据可视化的基本元素，因为它们决定了数据视觉编码的方式。L7 目前支持连续、离散、枚举类型等常用的 Scale。

Scale 中的两个重要概念:

Range 和 Domain

Domain: 地图数据值的定义区间

Range：视觉值的区间定义

不同 Scale 的差异在于 Domain-> Range 的转换方法不同

数据类	度量类型
连续	linear、log、pow
连续分类	quantize quantile,threshold,diverging
分类枚举	cat

L7 Scale

在使用 L7 过程中，默认情况下不需要进行 Scale 的配置，因为 L7 会根据数据类型对 scale 推断，推断过程如下：

查看用户是否设置了 Scale，如果没有:

判断字段的第一条数据的字段类型，如果数据中不存在对应的字段：

认为是常量为固定值

如果是数字则为 'linear';

如果是字符串类型 'cat';

Cat 枚举

Cat 指枚举类型，用于展示分类数据，比如农作物种植区分布图，水稻、玉米、大豆等不同类别需要映射为不同的颜色。在 L7 如果判断字段的值为字符串，将认为是 Cat 类型并自动获取类型的唯一值，设置为 domain 。这样三种作物就会被一一映射成对应的颜色。


const data = [
   {
   type:'A',
   x: 110,
   y:30
 },
 {
   type:'B',
   x: 110,
   y:32
 },
 {
   type:'C',
   x: 110,
   y:31
 }
 ,{
   type:'D',
   x: 111,
   y:33
 }，
 ,{
   type:'E',
   x: 112,
   y:30
 }
 ,{
   type:'F',
   x: 110,
   y:30
 }
]
layer.color('type',['red','white','blue','yellow'])

如上面的代码所示，图层没有设置 Scale, L7 根据第一个数据"A"的类型 ,推断为枚举类型。同时取出该字段的去重后的所有值 ['A','B','C','D','E','F'] 设置为 scale 的 domain, 那么 range 就是对应的颜色 ['red','white','blue','yellow']。

如果不设置 domain，L7 内部会自动计算 domain，domain 顺序跟数据顺序相关。如果希望固定domain 可自己设置 domain。domain 数值和 range数值一一对应。


layer.scale('type', {
  type: 'cat',
  domain: ['B', 'A', 'C', 'D'],
});
layer.color('type', ['red', 'white', 'blue', 'yellow']);

Linear 连续线性

线性是连续数据的映射方法，数据和视觉值是通过线性方法计算的。如数据范围domain [0,1000] 线性映射到 range [red,blue] 渐变色，就是依据线性函完成一一转换。

layer.color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494'])

对于连续型数据 L7 默认会设置为 linear, domain为数据的min、max值。颜色会根据 range 颜色生成渐变色。linear 默认可不设置 domain 区间

layer.scale('value', {
  type: 'linear',
  domain: [5, 100], // 可定义domain,也可以不设置，自定根据数据计算
});

quantize 连续等间距

等间距分类会根据属性值范围划分为若干个大小相等的子范围。相等间隔最适用于常见的数据范围，如百分比和温度。这种方法强调的是某个属性值相对于其他值的量。

等间距分类只与数据 mix、max 有关，如果没有设置 domain,将自动计算数据的 min、max 进行分段，分段个数依据 range 颜色的个数。等间距会出现空类，而且每个分类要素分布不均匀。

layer.color('type', ['red', 'white', 'blue', 'yellow']);

你也可以自定义 domain


layer.scale('value', {
  type: 'quantize',
  domain: [5, 100],
});

layer.color('type', ['red', 'white', 'blue', 'yellow']);

quantile 连续等分位

等分位要求每个分类区间都含有相等数量的要素。分位数为每个分类分配相等数量数据值，不存在空类，也不存在值过多或过少的类。

等分位与数据的分布相关，需要拿到全量数据才能计算，因此等分位的 scale 不能单独设置 domain，只能自动计算。


layer.scale('value', {
  type: 'quantile',
});

layer.color('value', ['red', 'white', 'blue', 'yellow']);

threshold 自定义分类

自定义分类可以设定任意分类区间映射到对于视觉变量。domain 仍然是连续的，并根据提供的domain 进行分类。range 属性必须有 N+1 个元素，其中 N 是 domain 的个数。

threshold 为自定义分段，在使用时必须为 Scale 设置 domain, domain可以依据需求任意设置。

layer.scale('rate', {
          type: 'threshold',
          domain: [3, 6, 8, 10],
        })
        .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494'])

diverging 离散分类

离散分类通常与两种相反的色调一起使用，以显示从负值到中心到正值的变化。这些类型的地图显示了彼此相关的值的大小。

diverging 如果没有设置 domain 会自动根据数据计算min、middle、max 三个值作为domain。range 至少需要设置三个颜色，形成双极色带。

layer.scale('rate', {
         type: 'diverging'
         domain: [3, 6, 8, 10], //  the input domain and output range of a diverging scal
       })
       .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494'])

6.6 KiB Raw Permalink Blame History Unescape Escape