我现在用d3.js绘制力导图,我需要点击某个节点,然后就追加展现这个节点的关系,我这个动作必须触发这个页面的重新刷新,这就导致点击后力导图因重新刷新而产生较大的抖动,我要怎么解决这个问题,使得我再重新加载力导图的时候页面不要抖动
时间: 2024-02-02 09:04:35 浏览: 16
你可以使用“进化树”的思路解决这个问题。即通过缓存当前树的状态,只添加新节点和边,不删除已有节点和边,从而避免页面抖动。
具体实现步骤如下:
1. 在页面初始化时,绘制力导图,并缓存当前树的状态(节点和边)。
2. 当用户点击某个节点时,获取该节点的关系数据,并添加到当前树的状态中。
3. 根据新的状态重新绘制力导图,但只添加新增的节点和边,不删除已有节点和边。这样就能避免页面抖动。
4. 当用户再次点击某个节点时,重复步骤2和3即可。
下面是示例代码:
```javascript
// 缓存当前树的状态
var nodes = [], links = [];
// 绘制力导图
function drawGraph() {
// ...
// 绘制节点和边
// ...
// 缓存当前树的状态
nodes = force.nodes();
links = force.links();
}
// 点击节点时,添加关系数据
function addNodeRelations(node) {
// ...
// 获取新的节点和边
// ...
// 将新增的节点和边添加到当前树的状态中
nodes.push(newNodes);
links.push(newLinks);
}
// 重新绘制力导图,但只添加新增的节点和边
function redrawGraph() {
// ...
// 只绘制新增的节点和边
// ...
// 更新当前树的状态
nodes = force.nodes();
links = force.links();
}
```
在实现过程中,你可能需要根据具体情况调整代码细节。