logo

G2

  • 文档
  • 图表介绍
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.3
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • sunburst
      • 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
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
      • pow
    • 转换(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
      • theta
      • transpose
      • radial
      • 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)
  • 图表 API
  • 图表组件
    • 标题(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
      • a11y
    • 按需打包
    • 设置纹理
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

fisheye

上一篇
概览
下一篇
parallel

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...

概述

鱼眼坐标系(Fisheye)是一种特殊的坐标系变换,它对输入的维度应用笛卡尔鱼眼效果,使得焦点区域被放大,而远离焦点的区域则被压缩。这种变换类似于鱼眼镜头的视觉效果,能够在保持全局视图的同时突出显示局部细节。

鱼眼坐标系变换主要用于以下场景:

  1. 数据探索:当需要同时关注数据的整体分布和局部细节时
  2. 可视化密集数据:当数据点过于密集,难以区分个体时
  3. 交互式数据分析:结合鼠标交互,动态调整焦点位置,实现数据的动态放大和缩小

在 G2 中,鱼眼坐标系可以通过坐标系变换来实现,也可以通过交互组件来动态应用。

坐标系原理

鱼眼坐标系的基本原理是:

  1. 定义一个焦点位置(focusX, focusY)
  2. 设置畸变程度(distortionX, distortionY)
  3. 根据点到焦点的距离,应用非线性变换
  4. 距离焦点越近的点变换后间距越大(放大效果)
  5. 距离焦点越远的点变换后间距越小(压缩效果)

开始使用

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
coordinate: {
transform: [{ type: 'fisheye', focusX: 0.5, focusY: 0.5 }],
},
type: 'point',
data: {
type: 'fetch',
value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json',
},
encode: {
x: 'GDP',
y: 'LifeExpectancy',
size: 'Population',
color: 'continent',
shape: 'point',
},
scale: {
size: {
type: 'log',
range: [4, 20],
},
},
style: {
fillOpacity: 0.3,
lineWidth: 1,
},
});
chart.render();

使用场景

鱼眼坐标系特别适合以下场景:

  1. 密集数据可视化:当数据点过于密集时,鱼眼效果可以帮助用户聚焦于特定区域,同时保持对整体数据的感知
  2. 网络图分析:在大型网络图中,鱼眼效果可以放大关注的节点和连接,同时保持网络的整体结构
  3. 地图导航:在地图可视化中,鱼眼效果可以放大特定区域,同时保持对周围环境的感知
  4. 交互式数据探索:结合鼠标交互,用户可以动态调整焦点位置,实现数据的动态放大和缩小

注意事项

  1. 畸变程度:畸变程度(distortionX/distortionY)设置过大会导致视觉失真严重,建议根据实际数据分布调整
  2. 焦点位置:焦点位置(focusX/focusY)应该根据数据分布和用户关注点来设置
  3. 交互体验:在交互式应用中,鱼眼效果的变化应该平滑,避免突变导致的视觉不适

配置项

鱼眼坐标系的配置项如下:

属性描述类型默认值必选
focusX鱼眼变换中心点 x 方向位置number0
focusY鱼眼变换中心点 y 方向位置number0
distortionX鱼眼变换 x 方向畸变大小number2
distortionY鱼眼变换 y 方向畸变大小number2
visualfocusX 和 focusY 的值是否是视觉坐标点booleanfalse

参数说明

  • focusX/focusY:定义鱼眼效果的焦点位置。当 visual=false 时,取值范围为 [0, 1],表示归一化坐标;当 visual=true 时,表示实际的视觉坐标点。
  • distortionX/distortionY:控制鱼眼效果的畸变程度,值越大,畸变效果越明显。
  • visual:决定 focusX 和 focusY 的坐标系统。设为 true 时,使用视觉坐标系统;设为 false 时,使用归一化坐标系统。

常见用例

1. 静态鱼眼效果

最简单的用法是设置一个固定的鱼眼焦点,适用于需要突出显示特定区域的场景。

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
coordinate: {
transform: [
{
type: 'fisheye',
focusX: 0.7,
focusY: 0.3,
distortionX: 3,
distortionY: 3,
},
],
},
type: 'point',
data: [
{ x: 1, y: 1, category: 'A' },
{ x: 2, y: 2, category: 'B' },
{ x: 3, y: 3, category: 'C' },
{ x: 4, y: 4, category: 'D' },
{ x: 5, y: 5, category: 'E' },
{ x: 6, y: 6, category: 'F' },
{ x: 7, y: 7, category: 'G' },
{ x: 8, y: 8, category: 'H' },
{ x: 9, y: 9, category: 'I' },
],
encode: {
x: 'x',
y: 'y',
color: 'category',
shape: 'point',
},
style: {
r: 6,
lineWidth: 1,
},
});
chart.render();

2. 交互式鱼眼效果

通过添加交互组件,可以实现动态的鱼眼效果,焦点随鼠标移动而变化。

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
type: 'point',
data: {
type: 'fetch',
value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json',
},
encode: {
x: 'GDP',
y: 'LifeExpectancy',
size: 'Population',
color: 'continent',
shape: 'point',
},
scale: {
size: {
type: 'log',
range: [4, 20],
},
},
style: {
fillOpacity: 0.3,
lineWidth: 1,
},
interaction: {
fisheye: true, // 启用鱼眼交互
},
});
chart.render();

完整示例

以下是一个结合了鱼眼坐标系和散点图的完整示例,展示了如何使用鱼眼效果来分析多维数据:

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
width: 800,
height: 500,
padding: [40, 60, 60, 80],
coordinate: {
transform: [
{
type: 'fisheye',
focusX: 0.6,
focusY: 0.4,
distortionX: 2.5,
distortionY: 2.5,
},
],
},
type: 'point',
data: {
type: 'fetch',
value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json',
},
encode: {
x: 'GDP',
y: 'LifeExpectancy',
size: 'Population',
color: 'continent',
shape: 'point',
},
scale: {
size: {
type: 'log',
range: [4, 20],
},
x: {
nice: true,
},
y: {
nice: true,
},
},
style: {
fillOpacity: 0.6,
lineWidth: 1,
stroke: '#fff',
},
legend: {
color: {
position: 'bottom',
layout: 'horizontal',
},
size: false,
},
axis: {
x: {
title: 'GDP',
titleFill: '#333',
labelFontSize: 12,
},
y: {
title: '预期寿命',
titleFill: '#333',
labelFontSize: 12,
},
},
tooltip: {
title: (d) => d.country,
items: [
(d) => ({ name: 'GDP', value: d.GDP }),
(d) => ({ name: '预期寿命', value: d.LifeExpectancy }),
(d) => ({ name: '人口', value: d.Population }),
],
},
});
chart.render();

这个示例展示了如何创建一个功能完整的鱼眼坐标系散点图,包括以下特性:

  1. 设置适当的鱼眼焦点和畸变程度,突出显示关键区域
  2. 使用多个数据维度(GDP、预期寿命、人口)创建散点图
  3. 根据大洲设置点的颜色,使用人口大小设置点的大小
  4. 自定义坐标轴和图例样式,提高可读性
  5. 添加交互式提示信息,显示详细数据

与其他坐标系的组合

鱼眼坐标系变换可以与其他坐标系变换组合使用,例如与 transpose 变换组合:

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
coordinate: {
transform: [
{ type: 'transpose' },
{
type: 'fisheye',
focusX: 0.5,
focusY: 0.5,
distortionX: 2,
distortionY: 2,
},
],
},
type: 'interval',
data: [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
],
encode: {
x: 'genre',
y: 'sold',
color: 'genre',
},
});
chart.render();

总结

鱼眼坐标系是一种强大的可视化工具,特别适合处理密集数据和需要关注局部细节的场景。通过合理设置焦点位置和畸变程度,可以在保持全局视图的同时突出显示关键区域。结合交互功能,鱼眼效果可以提供更加灵活和直观的数据探索体验。

在实际应用中,建议根据数据分布和用户需求调整鱼眼参数,避免过度畸变导致的视觉失真。同时,考虑与其他坐标系变换和交互组件的组合,可以创建更加丰富和有效的可视化效果。