d3.js save states

Question

I use D3.js to visualize a couple of datasets in an interactive and dynamic way. Users can explore all graphs and retrieve individual views on the data by loading combining additional data and views. I want users to be able to share their treasure found in the data via mail, facebook etc. but in a way the new user, visiting the shared "snapshot" could move on exploring the data. So I need to

1. persist the current state of my dynamic webpage
2. be able to load and display this state fast.
3. bind all events that have been bound in the moment the user snapshot

As a as simple as possible example (there are going to be various graphs and lots of events), imagine having a simple d3 linegraph and

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

This new dynamically loaded page contains i.e. several svgs. But if I simply save the shape and position of every svg, it could be hard to keep track of all current event-bindings. And if I save every action the former user did, how could I reload the snapshot efficiently?

Answer 1

The simplest thing i can imagine would be looping over all the nodes storing their identity and their state as a hash then sending this hash as json using ajax back to the server and putting the hash in a databas along with a key that is returned to the user as an url. when visiting the url you then load the d3js object and run through the hash setting the state of each node to what it was.

getting the state of the nodes would require some more knowledge in d3js.

What kind of data are you displaying? You should perhaps beable to add an event register to your js and record all the events executed. trough the event callers.

for instance say I have the following data

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

You should and want to show/hide nodes of this tree on mouse click.

You should be able to do somthing like this

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

This way you should end up with somthing like this

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

Thus you have a storable state! that can be executed.