javascript - 将 d3 树状态保存到 localStorage

Question

我用 d3.js 制作了一个可折叠的树形布局，用户可以在其中单击以展开和折叠分支。如果用户在展开一些分支后离开页面，稍后又回到页面，图表应该与离开时的状态相同。

现在，我有一个 click 函数，可以将点击的节点标记为openor closed（或者如果它还没有被点击，则它是未定义的）：

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  // toggle node state
  if (d.state === undefined || d.state == "closed") {
    d.state = "open";
  } else {
    d.state = "closed";
  }
  update(d);
}

这很好用，而且很简单。

我的想法是使用这些新信息更新我正在使用的 JSON 数据集并将其写入 localStorage，每次用户访问页面时首先检查它，然后虚拟单击所有标记为“打开”的节点（不确定如何否则这样做）。

但问题是，我如何用这个新的节点信息重写 JSON 数据集，或者有没有比我上面概述的更好的方法？

请注意，从 localStorage 的实际放入和获取不是问题；我知道该怎么做。具体是如何将树的当前状态返回到新的/修改后的数据集中，脚本可以稍后在用户返回页面时再次读取该数据集。