diffY

binX

dodgeX

概述

diffY 是一个比较特殊的通道变化，主要是针对 encode.y 中的 y1 进行变换。对于面积图来说，它具备有 y 和 y1 通道，分别代表着面积图形的上边界和下边界，diffY 会对每一个面积图形的 y1 做以下处理：

计算每个 x 对应的 y1 的最大值 y1max

然后针对每个图形的 y 去判断和 y1max 的大小，如果 y1max > y 则移除这个数据，否则设置 y1 = y1max

常用于面积图、柱形图等这类具有 y1 的 mark，因为视觉上，最终效果是只显示两个柱子、面积图形交叠的地方，所以命名为 diffY。

使用场景

diffY 基本专用于面积图，用于突出看到对比情况下的最值情况，在其他 mark 下使用相对比较少。

例如下面的的案例是看 New York 和 San Francisco 两个城市的天气情况的趋势，通过 diffY 就可以凸显出在同一个时间 x 下，到底那个城市的温度更高。

{
  "children": [
    {
      "type": "area",
      "data": {
        "transform": [
          {
            "type": "fold",
            "fields": [
              "New York",
              "San Francisco"
            ],
            "key": "city",
            "value": "temperature"
          }
        ]
      },
      "encode": {
        "y": "temperature",
        "color": "city",
        "shape": "hvh"
      },
      "transform": [
        {
          "type": "diffY"
        }
      ],
      "style": {
        "opacity": 0.5
      }
    },
    {
      "type": "line",
      "encode": {
        "y": "San Francisco",
        "shape": "hvh"
      },
      "style": {
        "stroke": "#000"
      }
    }
  ]
}

配置项

属性	描述	类型	默认值
groupBy	按照哪个通道分组数据	`ChannelTypes` \| `ChannelTypes[]`	`x`

groupBy

在 diffY 执行的时候，需要将数据进行分组，在每个分组中执行 diffY 的计算逻辑，比如对于面积图，需要把同一个 x 值下的 y 数据变成一个组，然后在组内做最大最小值的处理逻辑，所以 groupBy 设置为 x 通道。

理论上，groupBy 可以设置为所有的通道值，具体可以参考 encode 文档。所有的枚举值如下：

export type ChannelTypes =
  | 'x'
  | 'y'
  | 'z'
  | 'x1'
  | 'y1'
  | 'series'
  | 'color'
  | 'opacity'
  | 'shape'
  | 'size'
  | 'key'
  | 'groupKey'
  | 'position'
  | 'series'
  | 'enterType'
  | 'enterEasing'
  | 'enterDuration'
  | 'enterDelay'
  | 'updateType'
  | 'updateEasing'
  | 'updateDuration'
  | 'updateDelay'
  | 'exitType'
  | 'exitEasing'
  | 'exitDuration'
  | 'exitDelay'
  | `position${number}`;

Ant Design Charts

diffY

概述

使用场景

配置项

groupBy

示例