d3.jsセーブステート

Question

私はD3.jsを使用して、2つのデータセットをインタラクティブでダイナミックな方法で視覚化します。ユーザーは、追加のデータとビューを結合してロードすることによって、すべてのグラフを探索し、データの個々のビューを取得することができます。 mail、facebookなどでデータ内の宝物を共有することができるようにしたいが、共有ユーザーの「スナップショット」を訪れたユーザーはデータの探索を進めることができる。だから私は

は私の動的なWebページの現在の状態を持続

に必要
1. は速いこの状態をロードし、表示することができ。例できるだけ単純として
2. バインド瞬間にバインドされているすべてのイベントのユーザースナップショット

（イベントの様々なグラフやたくさんのことをそこに行くされている）、シンプルD3を持つ想像この新しい動的に読み込まれたページには、数個のsvgが含まれています。しかし、すべてのsvgの形と位置を単純に保存すると、現在のすべてのイベントバインディングを追跡するのが難しくなる可能性があります。 以前のユーザーが行ったすべての操作を保存した場合、スナップショットを効率的に再ロードするにはどうすればよいですか？

Answer 1

アイデンティティを格納しているすべてのノードとその状態をハッシュとしてループし、サーバーにajaxを使用してjsonとして送信し、ハッシュをキーとともにデータベースに格納すると想像できる最も簡単なことは、 urlとしてユーザーに返されます。 urlにアクセスすると、d3jsオブジェクトがロードされ、各ノードの状態を元に戻してハッシュを実行します。

ノードの状態を取得するには、d3jsでさらに知識が必要です。

どのような種類のデータを表示していますか？おそらく、jsにイベントレジスタを追加し、実行されたすべてのイベントを記録することができます。イベント発信者を通します。例えば

は、私はあなたが

{"Things":{ 
     "Balls":{ 
     "Footballs":"", 
     "Basketballs":"" 
     }, 
    "Persons":{ 
     "Painter":{ 
      "Pablo":"","Robert":"" 
     }, 
     "Programmers":{ 
     "Robert":""}}} 

次のデータをすべきである持っているし、マウスクリックでこのツリーの表示/非ノードを表示したいと言います。

あなたはこの

var eventlog = []; 
$(".nodes").onClick(function(this){ 
    if (isClosed(this)){ 
    function_to_open_node(); 
    eventlog.append({"action" : "open", "id" : this.id}) 
    }else{ 
    function_to_close_node(); 
    eventlog.append({"action" : "close", "id" : this.id}) 
    } 
}) 

ようにあなたは、このように、この

[{"action" : "close", "id" : "id"},{"action" : "close", "id" : "someotherid"},{"action" : "close", "id" : "someid"}] 

あなたが保存可能な状態を持っているように気にいらないで終わる必要があります。この方法は気にいらを行うことができるはず！実行することができます。