fisheye
上一篇
概览
下一篇
parallel
Loading...
鱼眼坐标系(Fisheye)是一种特殊的坐标系变换,它对输入的维度应用笛卡尔鱼眼效果,使得焦点区域被放大,而远离焦点的区域则被压缩。这种变换类似于鱼眼镜头的视觉效果,能够在保持全局视图的同时突出显示局部细节。
鱼眼坐标系变换主要用于以下场景:
在 G2 中,鱼眼坐标系可以通过坐标系变换来实现,也可以通过交互组件来动态应用。
鱼眼坐标系的基本原理是:
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();
鱼眼坐标系特别适合以下场景:
鱼眼坐标系的配置项如下:
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
focusX | 鱼眼变换中心点 x 方向位置 | number | 0 | |
focusY | 鱼眼变换中心点 y 方向位置 | number | 0 | |
distortionX | 鱼眼变换 x 方向畸变大小 | number | 2 | |
distortionY | 鱼眼变换 y 方向畸变大小 | number | 2 | |
visual | focusX 和 focusY 的值是否是视觉坐标点 | boolean | false |
visual=false
时,取值范围为 [0, 1],表示归一化坐标;当 visual=true
时,表示实际的视觉坐标点。最简单的用法是设置一个固定的鱼眼焦点,适用于需要突出显示特定区域的场景。
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();
通过添加交互组件,可以实现动态的鱼眼效果,焦点随鼠标移动而变化。
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();
这个示例展示了如何创建一个功能完整的鱼眼坐标系散点图,包括以下特性:
鱼眼坐标系变换可以与其他坐标系变换组合使用,例如与 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();
鱼眼坐标系是一种强大的可视化工具,特别适合处理密集数据和需要关注局部细节的场景。通过合理设置焦点位置和畸变程度,可以在保持全局视图的同时突出显示关键区域。结合交互功能,鱼眼效果可以提供更加灵活和直观的数据探索体验。
在实际应用中,建议根据数据分布和用户需求调整鱼眼参数,避免过度畸变导致的视觉失真。同时,考虑与其他坐标系变换和交互组件的组合,可以创建更加丰富和有效的可视化效果。