基于d3树的图表的Angular指令中的数据突变

Data mutation in Angular directive for d3 tree-based chart

本文关键字:指令 数据 突变 Angular d3 基于      更新时间:2023-09-26

我正在使用具有d3.layout.tree()布局的d3来构建基于 SVG 的树。我将这个 d3 代码包装成一个角度指令,并希望每次数据更改时重新渲染树。数据对象是指令的参数,从指令外部传入。为了执行数据更改时的更新,该指令$watch其数据参数并调用树的 render 方法,该方法执行所有更新/输入/删除。

到目前为止,理论。不幸的是,d3在实际数据对象上存储了一些状态信息,这些信息将触发指令的$watch处理程序,以便重新绘制树,最终进入无限循环。

以前有没有人遇到过这样的问题,有什么好方法可以解决它?我可以将实际数据对象的副本传递到 d3 -rendering 方法中,但这会在每次树数据更改时清除树状态信息。树数据被更改的原因是,一旦树被展开,就会加载新的叶/节点信息(最初除了根节点之外的所有节点都被折叠),所以我真的很想保留树的状态信息。

对 d3 一无所知...

  1. 深层复制 Obj A 以创建 Obj B
  2. 将 Obj B 传递到 d3
  3. 观看 Obj A
  4. 触发监视时,递归遍历 Obj A 并更新对象 B。任何新节点都可以深层复制,同时必须迭代现有节点以检查要更新的 d3 信息。

这可以抽象为util函数。