Fisheye 鱼眼放大镜是为 focus+context 的探索场景设计的，它能够保证在放大关注区域的同时，保证上下文以及上下文与关注中心的关系不丢失。

参考示例：

• 鱼眼放大镜
• 自定义鱼眼放大镜

配置项

Required type

fisheye | string

此插件已内置，你可以通过 type: 'fisheye' 来使用它。

d

number Default: 1.5

畸变因子

maxD

number Default: 5

鱼眼放大镜可调整的最大畸变因子，配合 scaleDBy 使用

maxR

number Default: 画布宽高的最小值的一半

鱼眼放大镜可调整的最大半径，配合 scaleRBy 使用

minD

number Default: 0

鱼眼放大镜可调整的最小畸变因子，配合 scaleDBy 使用

minR

number Default: 0

鱼眼放大镜可调整的最小半径，配合 scaleRBy 使用

nodeStyle

NodeStyle | ((datum: NodeData) => NodeStyle__)

在鱼眼放大镜中的节点样式

preventDefault

boolean Default: true

是否阻止默认事件

r

number Default: 120

鱼眼放大镜半径

scaleDBy

'wheel' | 'drag'

调整鱼眼放大镜畸变因子的方式

• 'wheel'：滚轮调整
• 'drag'：拖拽调整

scaleRBy

'wheel' | 'drag'

调整鱼眼放大镜范围半径的方式

• 'wheel'：滚轮调整
• 'drag'：拖拽调整

如果 trigger、scaleRBy 和 scaleDBy 同时设置为 'drag'，优先级顺序为 trigger > scaleRBy > scaleDBy，只会为优先级最高的配置项绑定拖拽事件。同理，如果 scaleRBy 和 scaleDBy 同时设置为 'wheel'，只会为 scaleRBy 绑定滚轮事件

showDPercent

boolean Default: true

是否在鱼眼放大镜中显示畸变因子数值

style

CircleStyleProps

鱼眼放大镜样式

trigger

'pointermove' | 'drag' | 'click' Default: ``

移动鱼眼放大镜的方式

• 'pointermove'：始终跟随鼠标移动
• 'click'：鼠标点击时移动
• 'drag'：拖拽移动

API

Fisheye.destroy()

destroy(): void;

Fisheye.update(options)

update(options: Partial<FisheyeOptions>): void;