antvis / antvis/G6

实现保存定位信息,界面缩放到指定center 位置一直有偏差

Open
#6,093 2 comments 0 reactions 0 assignees View on GitHub
v5
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

实现保存center和zoom 用zoomTo 还原定位 出现位置偏差

### Reproduction link / 重现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

*************body**********



保存
刷新
修改定位1

*************body**********

*************script**********
var graph =''
const data = {
// 点集
nodes: [
{
id: 'node1', // String,该节点存在则必须,节点的唯一标识
x: 100, // Number,可选,节点位置的 x 值
y: 200, // Number,可选,节点位置的 y 值
},
{
id: 'node2', // String,该节点存在则必须,节点的唯一标识
x: 300, // Number,可选,节点位置的 x 值
y: 200, // Number,可选,节点位置的 y 值
},
],
// 边集
edges: [
{
source: 'node1', // String,必须,起始点 id
target: 'node2', // String,必须,目标点 id
},
],
};
init()
function init(){
if(graph){
graph.destroy()
graph=null
}
graph = new G6.Graph({
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
},
container: 'container', // String | HTMLElement,必须,在 Step 1 中创建的容器 id 或容器本身
width: 800, // Number,必须,图的宽度
height: 500, // Number,必须,图的高度
});
graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图
// console.log('getViewPortCenterPoint0',graph.getViewPortCenterPoint())
// console.log('getGraphCenterPoint0',graph.getGraphCenterPoint())
let position=localStorage.getItem('position')
if(position){
let pp=JSON.parse(position)
let client= graph.getClientByPoint(pp.center.x, pp.center.y)
let client1= graph.getCanvasByPoint(pp.center.x, pp.center.y)
console.log('pp',pp)
console.log('client',client)
console.log('client1',client1)
graph.zoomTo(pp.zoom,client1)

let zoom=graph.getZoom()
let center=graph.getGraphCenterPoint()
console.log('zoom',zoom)
console.log('center',center)
}
}
function test(){
let zoom=graph.getZoom()
let center=graph.getViewPortCenterPoint()
let center1=graph.getGraphCenterPoint()
console.log('savezoom',zoom)
console.log('center111',center1)
console.log('savecenter',graph.getGraphCenterPoint())

let positon={
zoom:zoom,
center:center
}

localStorage.setItem('position',JSON.stringify(positon))
// console.log('getViewPortCenterPoint',graph.getViewPortCenterPoint())
// console.log('getGraphCenterPoint',graph.getGraphCenterPoint())

// console.log('getPointByClient',graph.getPointByClient(0,0))
// console.log('getClientByPoint',graph.getClientByPoint(0, 0))
// console.log('getPointByCanvas',graph.getPointByCanvas(0, 0))
// console.log('getCanvasByPoint',graph.getCanvasByPoint(0, 0))

}
function changePosition1(){
graph.zoomTo(1,{x:0,y:0})
}
function reload(){
init()
}
*************script**********

### G6 Version / G6 版本

🆕 5.x

### Operating System / 操作系统

Windows

### Browser / 浏览器

Chrome

### Additional context / 补充说明

_No response_

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the reproduction's init(), test(), reload(), and graph.zoomTo() entry points, focusing on the different center-coordinate APIs used when saving and restoring the view. Compare the saved center and zoom with the restored viewport in G6 5.x. Done means reloading restores the same center and zoom without the reported position offset.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.