d3.js save states

Question

Uso D3.js para visualizar un par de conjuntos de datos de una manera interactiva y dinámica. Los usuarios pueden explorar todos los gráficos y recuperar vistas individuales de los datos al cargar combinando datos y vistas adicionales. Quiero que los usuarios puedan compartir sus tesoros encontrados en los datos a través del mail, facebook etc., pero de alguna manera el nuevo usuario que visite la "instantánea" compartida podría seguir explorando los datos. Así que tengo que

1. persisten el estado actual de mi página web dinámica
2. ser capaz de cargar y mostrar este estado rápida.
3. se unen todos los eventos que han sido unidos en el momento de la instantánea de usuario

Como tan simple como sea posible ejemplo (no van a ser varios gráficos y un montón de eventos), imaginar tener un d3 sencillo linegraph y

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

Esta nueva página dinámicamente cargado contiene es decir, varios svg s. Pero si simplemente guardo la forma y posición de cada svg, podría ser difícil hacer un seguimiento de todos los enlaces de eventos actuales. Y si guardo todas las acciones que hizo el usuario anterior, ¿cómo podría volver a cargar la instantánea de manera eficiente?

Answer 1

Lo más simple que puedo imaginar sería recorrer todos los nodos que almacenan su identidad y su estado como un hash y luego enviar este hash como json usando ajax de vuelta al servidor y poner el hash en un databas junto con una clave que se devuelve al usuario como una url. al visitar la url, a continuación, carga el objeto d3js y ejecuta el hash estableciendo el estado de cada nodo como era.

obtener el estado de los nodos requeriría un poco más de conocimiento en d3js.

¿Qué tipo de datos muestra? Quizás deberías poder agregar un registro de eventos a tu js y registrar todos los eventos ejecutados. a través de los llamadores del evento.

, por ejemplo, decir que tengo los datos siguientes

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

Debe y quieren mostrar/ocultar los nodos de este árbol en un clic del ratón.

Usted debe ser capaz de hacer algo como esto

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}) 
    } 
}) 

De esta manera usted debe terminar con algo como esto

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

Por lo tanto usted tiene un estado almacenable! eso puede ser ejecutado