d3.js save states

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이 포함되어 있습니다. 그러나 모든 svg의 모양과 위치를 단순히 저장하면 모든 현재 이벤트 바인딩을 추적하기가 어려울 수 있습니다. 그리고 이전 사용자가 수행 한 모든 작업을 저장하면 어떻게 효율적으로 스냅 샷을 다시로드 할 수 있습니까?

Answer 1

내가 상상할 수있는 가장 단순한 것은 자신의 신원을 저장하는 모든 노드와 해시로 상태를 반복 한 다음 서버에 아약스를 사용하여 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"}] 

당신이 저장 가능한 상태를 가지고있는 것처럼 뭔가를해야만와 끝까지해야이 방법을 뭔가를해야만 할 수 있어야! 실행될 수 있습니다.