d3.js保存狀態

Question

我使用D3.js以交互式和動態方式顯示幾個數據集。用戶可以通過加載組合附加數據和視圖來瀏覽所有圖形並檢索數據的各個視圖。我希望用戶能夠通過mail,facebook等分享他們在數據中發現的寶藏，但是通過訪問共享「快照」的新用戶可以移動探索數據。所以，我需要

1. 堅持我的動態網頁的當前狀態
2. 能夠加載和顯示此狀態快速。
3. 綁定已在瞬間被綁定的所有事件的用戶快照

作爲儘可能例如簡單（有將是各種圖表和大量的事件），想象我們有一個簡單的D3線圖和

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

這個新的動態加載的頁面包含即幾個svg s。但是如果我簡單地保存每個svg的形狀和位置，就很難跟蹤當前所有的事件綁定。 如果我保存前用戶所做的每一個動作，我如何有效地重新加載快照？

Answer 1

我可以想象的最簡單的事情就是遍歷所有存儲其身份和狀態的節點作爲散列，然後將此散列作爲json使用ajax發送回服務器，並將散列放入數據庫以及密鑰以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"}] 

因此，你有一個可存儲的狀態！可以執行。