Fisheye 鱼眼放大镜是为 focus+context 的探索场景设计的,它能够保证在放大关注区域的同时,保证上下文以及上下文与关注中心的关系不丢失。
参考示例:
fisheye
| string
此插件已内置,你可以通过 type: 'fisheye'
来使用它。
number Default:
1.5
畸变因子
number Default:
5
鱼眼放大镜可调整的最大畸变因子,配合 scaleDBy
使用
number Default:
画布宽高的最小值的一半
鱼眼放大镜可调整的最大半径,配合 scaleRBy
使用
number Default:
0
鱼眼放大镜可调整的最小畸变因子,配合 scaleDBy
使用
number Default:
0
鱼眼放大镜可调整的最小半径,配合 scaleRBy
使用
NodeStyle | ((datum: NodeData) => NodeStyle__)
在鱼眼放大镜中的节点样式
boolean Default:
true
是否阻止默认事件
number Default:
120
鱼眼放大镜半径
'wheel' | 'drag'
调整鱼眼放大镜畸变因子的方式
'wheel'
:滚轮调整'drag'
:拖拽调整'wheel' | 'drag'
调整鱼眼放大镜范围半径的方式
'wheel'
:滚轮调整'drag'
:拖拽调整如果 trigger
、scaleRBy
和 scaleDBy
同时设置为 'drag'
,优先级顺序为 trigger
> scaleRBy
> scaleDBy
,只会为优先级最高的配置项绑定拖拽事件。同理,如果 scaleRBy
和 scaleDBy
同时设置为 'wheel'
,只会为 scaleRBy
绑定滚轮事件
boolean Default:
true
是否在鱼眼放大镜中显示畸变因子数值
鱼眼放大镜样式
'pointermove' | 'drag' | 'click' Default: ``
移动鱼眼放大镜的方式
'pointermove'
:始终跟随鼠标移动'click'
:鼠标点击时移动'drag'
:拖拽移动destroy(): void;
update(options: Partial<FisheyeOptions>): void;
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
options | Partial<FisheyeOptions> | 配置项 | - | ✓ |