10

私D3.jsはインタラクティブで動的な方法でいくつかのデータセットを視覚化するために使用します。ユーザーは、追加のデータとビューを組み合わせてロードすることにより、すべてのグラフを探索し、データの個々のビューを取得できます。ユーザーが などを介してデータで見つけた宝物を共有できるようにしたいのですmailがfacebook、ある意味で、共有された「スナップショット」にアクセスする新しいユーザーがデータの探索に進むことができます。だから私はする必要があります

  1. 動的 Web ページの現在の状態を維持する
  2. この状態を高速に読み込んで表示できます。
  3. 現時点でバインドされているすべてのイベントをユーザー スナップショットにバインドする

できるだけ単純な例として(さまざまなグラフと多くのイベントが発生する予定です)、単純な d3 折れ線グラフと

graph.selectAll("path").on('mouseover', function(d){
    $.get("ajaxFunction",{"d" : d} ,function(jsonData) {
        //INIT NEW SVG
    });
});

この新しい動的にロードされるページには、いくつかsvgの が含まれています。しかし、単純にすべての SVG の形状と位置を保存すると、現在のすべてのイベント バインディングを追跡するのが難しくなる可能性があります。また、以前のユーザーが行ったすべてのアクションを保存した場合、スナップショットを効率的に再読み込みするにはどうすればよいでしょうか?

4

1 に答える 1

1

私が想像できる最も簡単なことは、IDと状態をハッシュとして保存しているすべてのノードをループし、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"}]

したがって、保存可能な状態になります。実行できること。

于 2012-08-30T15:11:35.753 に答える