Viewport Operations | G6 Graph Visualization Framework in JavaScript

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

忐忑的牛排 · 移动端提高pdf预览清晰度-京东云开发者社区· 3 周前 ·

八块腹肌的生菜 · 移动端PDF预览 · LIZHAO· 3 周前 ·

温暖的水煮鱼 · 【中國媒體深度文剖析】台灣音樂產業興亡史：滾 ...· 2 月前 ·

从未表白的骆驼 · 驻卢旺达使馆举行庆祝中国人民解放军建军97周 ...· 11 月前 ·

阳光的牙膏 · django A表存储商品的ID和名称，B表 ...· 1 年前 ·

面冷心慈的草稿本 · 四川公安公布6起危害国家安全典型案例 - ...· 1 年前 ·

温文尔雅的鸵鸟 · 高通滤波法、微分算子法、神经网络方法实现图像 ...· 1 年前 ·

// Zoom out to 0.5x with animation

graph . zoomTo ( 0.5 , {

duration : 500 ,

easing : 'ease' ,

} ) ;

// Zoom in with the viewport center as the origin

graph . zoomTo ( 1.5 , false , graph . getCanvasCenter ( ) ) ;

Graph.zoomBy(ratio, animation, origin)

Zoom based on the current zoom scale (relative zoom).

zoomBy(ratio: number, animation?: ViewportAnimationEffectTiming, origin?: Point): Promise<void>;

Parameters

Parameter	Description	Type	Default	Required
ratio	Zoom ratio (>1 zoom in, <1 zoom out)	number	-	✓
animation	Animation configuration	ViewportAnimationEffectTiming	-
origin	Zoom center point (viewport coordinates)	Point	-

Example

// Zoom in by 1.2x based on the current scale
graph.zoomBy(1.2);

// Zoom out to 0.8x based on the current scale with animation
graph.zoomBy(0.8, {
  duration: 300,
});

Graph.translateTo(position, animation)

Pan the graph to a specified position (absolute pan).

translateTo(position: Point, animation?: ViewportAnimationEffectTiming): Promise<void>;

Parameters

Parameter	Description	Type	Default	Required
position	Target position coordinates	Point	-	✓
animation	Animation configuration	ViewportAnimationEffectTiming	-

Example

// Pan to a specified position
graph.translateTo([100, 100]);

// Pan with animation
graph.translateTo([200, 200], {
  duration: 1000,
  easing: 'ease-in-out',
});

Graph.translateBy(offset, animation)

Pan the graph by a specified distance relative to the current position (relative pan).

translateBy(offset: Point, animation?: ViewportAnimationEffectTiming): Promise<void>;

Parameters

Parameter	Description	Type	Default	Required
offset	Pan offset	Point	-	✓
animation	Animation configuration	ViewportAnimationEffectTiming	-

Example

// Pan right by 100 pixels and down by 50 pixels
graph.translateBy([100, 50]);

// Relative pan with animation
graph.translateBy([-50, -50], {
  duration: 500,
});

Graph.rotateTo(angle, animation, origin)

Rotate the canvas to a specified angle (absolute rotation).

rotateTo(angle: number, animation?: ViewportAnimationEffectTiming, origin?: Point): Promise<void>;

Parameters

Parameter	Description	Type	Default	Required
angle	Target rotation angle (radians)	number	-	✓
animation	Animation configuration	ViewportAnimationEffectTiming	-
origin	Rotation center point (viewport coordinates)	Point	-

Example

// Rotate to 45 degrees
graph.rotateTo(Math.PI / 4);

推荐文章

忐忑的牛排 · 移动端提高pdf预览清晰度-京东云开发者社区

3 周前

八块腹肌的生菜 · 移动端PDF预览 · LIZHAO

3 周前

温暖的水煮鱼 · 【中國媒體深度文剖析】台灣音樂產業興亡史：滾石唱片如何 37 年靠著不斷轉型求生存？ | TechOrange 科技報橘

2 月前

从未表白的骆驼 · 驻卢旺达使馆举行庆祝中国人民解放军建军97周年招待会

11 月前

阳光的牙膏 · django A表存储商品的ID和名称，B表存储商品的每时每刻价格信息打开页面默认显示一个商品的价格信息，最下方有两个按钮上一个和下一个。点击可切换当前显示的商品价格信息 - CSDN文库

1 年前

面冷心慈的草稿本 · 四川公安公布6起危害国家安全典型案例 - 四川省公安厅

1 年前

温文尔雅的鸵鸟 · 高通滤波法、微分算子法、神经网络方法实现图像边缘检测 - TimDyh - 博客园

1 年前