d3.js salva stati

Question

Io uso D3.js per visualizzare un paio di set di dati in modo interattivo e dinamico. Gli utenti possono esplorare tutti i grafici e recuperare le singole visualizzazioni sui dati caricando combinando dati e viste aggiuntivi. Voglio che gli utenti siano in grado di condividere il loro tesoro trovato nei dati tramite mail, facebook ecc. Ma in un certo senso il nuovo utente, visitando lo "snapshot" condiviso, potrebbe passare all'esplorazione dei dati. Così ho bisogno di

1. persistono lo stato attuale della mia pagina web dinamica
2. essere in grado di caricare e visualizzare questo stato veloce.
3. legano tutti gli eventi che sono stati legati nel momento in cui l'istantanea all'utente

Come più semplice possibile esempio (ci stanno per essere vari grafici e un sacco di eventi), immaginate di avere un semplice d3 linegraph e

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

Questa nuova pagina caricata dinamicamente contiene cioè diversi svg s. Ma se salvi semplicemente la forma e la posizione di ogni svg, potrebbe essere difficile tenere traccia di tutte le associazioni di eventi correnti. E se salvassi ogni azione eseguita dal vecchio utente, come avrei potuto ricaricare lo snapshot in modo efficiente?

Answer 1

La cosa più semplice che posso immaginare sarebbe il loop su tutti i nodi che memorizzano la loro identità e il loro stato come un hash, quindi inviare questo hash come json usando ajax di nuovo al server e mettendo l'hash in un databas insieme a una chiave che viene restituito all'utente come url. quando si visita l'url, quindi si carica l'oggetto d3js e si esegue l'hash impostando lo stato di ciascun nodo su quello che era.

ottenere lo stato dei nodi richiederebbe maggiore conoscenza in d3js.

Che tipo di dati stai visualizzando? Forse dovresti aggiungere un registro degli eventi al tuo js e registrare tutti gli eventi eseguiti. attraverso i chiamanti dell'evento.

per esempio dire che ho i seguenti dati

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

Si dovrebbe e vuole mostrare/nascondere i nodi di questo albero al clic del mouse.

Si dovrebbe essere in grado di fare somthing come questo

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

In questo modo si dovrebbe finire con somthing come questo

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

Così si dispone di uno stato immagazzinabile! che può essere eseguito.