[Bug]: fitView() and AutoZoom shrink graph after changeData() in G6 v4.7.0
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
**🧠 Description**
Hi, I’m having a problem with AntV G6 v4.7.0 when I load graph data dynamically using changeData().
After the new data is applied, calling graph.fitView() (or using the AutoZoom button from the toolbar) makes the graph appear very small and pushed to a corner, instead of fitting nicely into the canvas.
This only happens after dynamic data loading — the initial render is fine.
**🧾 Environment**
G6 version: 4.7.0
Browser: Chrome 141
OS: macOS 10.15
Usage: Loading nodes & edges from backend (via AJAX), then calling graph.changeData(data)
Graph: Static coordinates (not using layout)
**❌ Actual behavior**
After calling graph.changeData(data) followed by graph.fitView(20) →
the graph becomes tiny or disappears at the top-left corner.
graph.fitCenter() doesn’t fix it either.
Toolbar AutoZoom also scales the graph incorrectly.
graph.get('group').getCanvasBBox() sometimes returns extremely large values (like x:-20000) or even NaN.
**✅ Expected behavior**
When fitView() or AutoZoom is called, the graph should resize and center correctly inside the canvas — just like it does on the first render.
**🧪 Reproduce**
graph = new G6.Graph({
container: 'mount',
width: 1000,
height: 800,
modes: { default: ['drag-canvas', 'zoom-canvas'] },
});
graph.data(initialData);
graph.render();
// later...
graph.changeData(newData);
graph.fitView(20);
After this, the graph becomes very small or off-screen.
**💡 Debug info**
Calling graph.refresh() or graph.paint() before fitView() doesn’t help.
Replacing data through graph.changeData(data, false) doesn’t change the outcome.
If I manually reset the group matrix and recalculate zoom, it looks normal again.
Example manual workaround that works:
const nodes = graph.getNodes().map(n => n.getModel());
const minX = Math.min(...nodes.map(n => n.x));
const minY = Math.min(...nodes.map(n => n.y));
nodes.forEach(n => { n.x -= minX; n.y -= minY; });
graph.changeData({ nodes, edges });
graph.refresh();
graph.zoomTo(1);
graph.translate(200, 200);
So the problem seems related to the internal group transform matrix not being reset after changeData() in G6 v4.7.0.
**🧩 Hypothesis**
fitView() and the toolbar AutoZoom rely on a stale or corrupted transform matrix when computing the bounding box (getCanvasBBox()), which leads to wrong scaling and NaN values.
**🧠 Suggested fix or clarification**
Maybe G6 needs to reset the internal transform matrix (or recompute groupBBox) after changeData().
Would appreciate any workaround or confirmation if this is a known issue in v4.7.0.
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
_No response_
### Version / 版本
Please select / 请选择
### OS / 操作系统
- [x] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [x] Chrome
- [x] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the changeData() followed by fitView(20) sequence from the issue, then trace fitView(), fitCenter(), toolbar AutoZoom, and get('group').getCanvasBBox() to inspect how transforms and bounds are used after data changes. Done means dynamically loaded static-coordinate data fits and centers correctly without tiny, off-screen, or NaN bounding-box results.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100