javascript - d3 ツリーの状態を localStorage に保存する

Question

d3.js を使用して折りたたみ可能なツリー レイアウトを作成しました。ユーザーはクリックしてブランチを展開したり折りたたんだりできます。ユーザーがいくつかのブランチを展開した後にページを離れ、後でページに戻った場合、グラフは離れたときと同じ状態になるはずです。

現在、クリックされたノードに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 への実際の書き込みと取得は問題ではないことに注意してください。私はそれを行う方法を知っています。具体的には、ツリーの現在の状態を、ユーザーがページに戻ったときにスクリプトが後で再度読み取ることができる新しい/改訂されたデータセットに戻す方法です。