logo

G2

  • 文档
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.2
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • point
      • polygon
      • range
      • rangeX
      • rangeY
      • rect
      • shape
      • text
      • vector
      • wordCloud
    • 视图(View)
    • 数据(Data)
      • 概览
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy
    • 编码(Encode)
    • 比例尺(Scale)
      • 概览
      • band
      • linear
      • log
      • ordinal
      • point
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • 转换(Transform)
      • 概览
      • bin
      • binX
      • diffY
      • dodgeX
      • flexX
      • group
      • groupColor
      • groupX
      • groupY
      • jitter
      • jitterX
      • jitterY
      • normalizeY
      • pack
      • sample
      • select
      • selectX
      • selectY
      • sortColor
      • sortX
      • sortY
      • stackEnter
      • stackY
      • symmetryY
    • 坐标系(Coordinate)
      • 概览
      • fisheye
      • parallel
      • polar
      • radial
      • theta
      • transpose
      • cartesian3D
      • helix
    • 样式(Style)
    • 动画(Animate)
      • 概览
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • 状态(State)
    • 交互(Interaction)
      • 概览
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • 复合(Composition)
      • 概览
      • facetCircle
      • facetRect
      • repeatMatrix
      • spaceFlex
      • spaceLayer
      • timingKeyframe
    • 主题(Theme)
      • 概览
      • academy
      • classic
      • classicDark
    • 事件(Event)
    • 颜色映射(Color)
  • 图表组件
    • 标题(Title)
    • 坐标轴(Axis)
    • 图例(Legend)
    • 滚动条(Scrollbar)
    • 缩略轴(Slider)
    • 提示信息(Tooltip)
    • 数据标签(Label)
  • 进阶主题
    • 关系图(Graph)
      • forceGraph
      • pack
      • sankey
      • tree
      • treemap
    • 地图(Geo)
      • geoPath
      • geoView
    • 3D 图表(3D Chart)
      • 绘制 3D 图表
      • point3D
      • line3D
      • interval3D
      • surface3D
    • 插件扩展(Plugin)
      • renderer
      • rough
      • lottie
    • 按需打包
    • 设置纹理
    • 绘制 3D 图表
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

join

上一篇
inline
下一篇
kde

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

概述

join 的功能是用于将两份数据连接在一起,类似于 SQL 中的 JOIN 操作。该功能通常用于合并两个数据源中基于共同字段的数据,可以按指定条件将两个数据源中的记录结合起来,形成一个新的数据集。这个功能对于在可视化中展示多个数据源之间的关联信息非常有用。该操作在数据预处理阶段完成,生成的新字段可直接用于图形绘制、字段映射、标注等操作。

配置项

属性描述类型默认值必选
join需要连接的数据源object[]-是
on两个数据源连接的字段[string | ((d: any) => string), string | ((d: any) => string)]-是
select从被连接的数据源中选择要显示的字段string[][]否
as为 select 出来的字段重命名string[]不做重命名否
unknown如果没有匹配到连接的数据,指定一个默认值anyNaN否

属性详细说明

  1. join:指定需要连接的第二份数据源,可以是一个对象数组,表示所有的连接数据。
  2. on:定义连接条件,传入一个包含两个字段的数组,或者是可以返回字段名的函数数组。用于在两个数据源中根据这些字段进行匹配。
  3. select:指定从被连接的数据源中选择哪些字段。默认为空数组,表示连接后的数据源包含所有字段。
  4. as:为 select 选择的字段指定别名。如果不指定,则默认为字段原名。
  5. unknown:当两个数据源中没有匹配的数据时,使用此值作为默认值。

📌 join 在复杂场景下能显著增强数据组织能力,是组合和清洗数据不可或缺的工具。

使用场景

  • 数据合并:合并多源数据,补全缺失字段。将两个具有相关字段的数据源合并成一个数据源,进行进一步分析或可视化。
  • 数据对齐:根据共同的字段对两个数据集进行对齐,生成可视化所需的结构。
  • 条件选择:将代码(如用户 ID、产品 ID)映射为描述信息。从被连接的数据源中选择指定的字段进行展示,同时避免冗余数据。

示例

基础用法

on 字段说明

on: ['id', 'code'] // 或使用函数方式 on: [(d) => d.id, (d) => d.code]

  • 将两个数据源按字段连接,并从外部数据中提取字段合并:
const data = [
{ a: 1, b: 2, c: 3 },
{ a: 4, b: 5, c: 6 },
];
const joinData = [
{ c: 1, d: 2, e: 3 },
{ c: 4, d: 5, e: 6 },
];
chart.options({
data: {
type: 'inline',
value: data,
transform: [
{
type: 'join',
join: joinData,
on: ['a', 'c'],
select: ['d', 'e'],
},
],
},
});
  • 转换结果为:
[
{ a: 1, b: 2, c: 3, d: 2, e: 3 },
{ a: 4, b: 5, c: 6, d: 5, e: 6 },
]

字段重命名

  • 使用 as 为 select 出来的字段重命名:
chart.options({
data: {
type: 'inline',
value: data,
transform: [
{
type: 'join',
join: joinData,
on: ['a', 'c'],
select: ['d', 'e'],
as: ['dd', 'ee'],
},
],
},
});
  • 转换结果为:
[
{ a: 1, b: 2, c: 3, dd: 2, ee: 3 },
{ a: 4, b: 5, c: 6, dd: 5, ee: 6 },
]

设置默认值 unknown

  • 当两个数据源中没有匹配的数据时,使用 unknown 指定一个默认值:
const data = [{ id: 1 }, { id: 2 }];
const joinData = [{ code: 1, label: 'A' }];
chart.options({
data: {
type: 'inline',
value: data,
transform: [
{
type: 'join',
join: joinData,
on: ['id', 'code'],
select: ['label'],
unknown: '未知',
},
],
},
});
  • 转换结果为:
[
{ id: 1, label: 'A' },
{ id: 2, label: '未知' },
]

tips

  • join 是一种 左连接(left join),意味着主数据一定保留。

  • select 不指定时默认不提取字段,只用于判断连接关系。

  • 推荐提前对 join 数据做去重处理,避免多对一连接时的歧义。

  • 支持动态函数提取连接字段,适配复杂结构。