15

I am trying to find the correct method to be able to save out a force diagram node layout positions once settled, then later, to reload that layout and start again from the same settled state.

I am trying to do this by cloning the DOM elements containing the diagram, removing it and then reloading it.

This I can do, in part as indicated below:-

_clone = $('#chart').clone(true,true);
$('#chart').remove();

Selects the containing div, clones it and removes it, then later

var _target = $('#p1content');
_target.append(_clone);

Selects the div that used to hold the chart and reloads it. Reloaded diagram is fixed.

I don't know how to reconnect the force to allow manipulation to carry on. Is this possible? I want to preserve the settled position of the nodes.

Another possibility, could I reload the node positions and start the force with a low alpha?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3: Force layout</title>
    <script src="./jquery-2.0.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../d3.v3.js"></script>
    <style type="text/css">
        /* No style rules here yet */
    </style>
</head>
<body>
     <div data-role="content" id="p1content">
        <div id="chart"></div>
    </div>
    <script type="text/javascript">

        //Width and height
        var w = 800;
        var h = 600;

        //Original data
        var dataset = {
            nodes: [
                { name: "Adam" },
                { name: "Bob" },
                { name: "Carrie" },
                { name: "Donovan" },
                { name: "Edward" },
                { name: "Felicity" },
                { name: "George" },
                { name: "Hannah" },
                { name: "Iris" },
                { name: "Jerry" }
            ],
            edges: [
                { source: 0, target: 1 },
                { source: 0, target: 2 },
                { source: 0, target: 3 },
                { source: 0, target: 4 },
                { source: 1, target: 5 },
                { source: 2, target: 5 },
                { source: 2, target: 5 },
                { source: 3, target: 4 },
                { source: 5, target: 8 },
                { source: 5, target: 9 },
                { source: 6, target: 7 },
                { source: 7, target: 8 },
                { source: 8, target: 9 }
            ]
        };

        //Initialize a default force layout, using the nodes and edges in dataset
        var force = d3.layout.force()
                             .nodes(dataset.nodes)
                             .links(dataset.edges)
                             .size([w, h])
                             .linkDistance([100])
                             .charge([-100])
                             .start();

        var colors = d3.scale.category10();

        //Create SVG element
        var svg = d3.select("#chart")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        //Create edges as lines
        var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 1);

        //Create nodes as circles
        var nodes = svg.selectAll("circle")
            .data(dataset.nodes)
            .enter()
            .append("circle")
            .attr("r", 10)
            .style("fill", function(d, i) {
                return colors(i);
            })
            .call(force.drag);

        //Every time the simulation "ticks", this will be called
        force.on("tick", function() {

            edges.attr("x1", function(d) { return d.source.x; })
                 .attr("y1", function(d) { return d.source.y; })
                 .attr("x2", function(d) { return d.target.x; })
                 .attr("y2", function(d) { return d.target.y; });

            nodes.attr("cx", function(d) { return d.x; })
                 .attr("cy", function(d) { return d.y; });

        });

// After 5 secs clone and remove DOM elements
        setTimeout(function() {
                        _clone = $('#chart').clone(true,true);
                        $('#chart').remove();
        }, 5000);
//After 10 secs reload DOM
        setTimeout(function() {
                        var _target = $('#p1content');
                        _target.append(_clone);

// WHAT NEEDS TO GO HERE TO RECOUPLE THE FORCE?                     

         }, 10000);

    </script>
</body>
</html>

Added this where I put // WHAT NEEDS TO GO HERE TO RECOUPLE THE FORCE?
This seems to work picking up the existing elements restored and recouples the Force where it left off passing the force nodes etc into the Timeout function

force = d3.layout.force()
    .nodes(dataset.nodes)
    .links(dataset.edges)
    .size([w, h])
    .linkDistance([100])
    .charge([-100])
    .start();

colors = d3.scale.category10();

//Create SVG element
svg = d3.select("#chart");

//Create edges as lines
edges = svg.selectAll("line")
    .data(dataset.edges);

//Create nodes as circles
nodes = svg.selectAll("circle")
    .data(dataset.nodes)
    .call(force.drag);

//Every time the simulation "ticks", this will be called
force.on("tick", function() {

    edges.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
    nodes.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

});
8
  • I don't think you will be able to get away that easily with just cloning the DOM elements... The visualization is created by d3.js inner workings, which means that when you reload, to be able to use it again would imply that d3.js knows what it is handling. Which is the same as saying, if you copy an element that is being held by d3.js, d3.js can only handle the original not the copy.
    – Joum
    Aug 13, 2013 at 10:12
  • This would mean that you might have to serialize the information that d3.js uses about the visualization and then find a way to build it again from serialized data... I don't think this is as easy as it sounds.
    – Joum
    Aug 13, 2013 at 10:14
  • Yes I thought this might not be easy. I can save off the data and reload of course, but the layout of the nodes is not preserved as the force diagram can settle to a new position. This was the reason to look at the DOM elements to create a snapshot. But I could not see how to recouple the force to it without effectively restarting from scratch
    – Dean
    Aug 13, 2013 at 10:21
  • 1
    I think that besides saving the DOM elements, you should think of saving what d3.js is actually using. I think you should try saving the nodes and links arrays that d3.js is using and then, when reloading your script, use that as the data to compute the layout instead of calling the original data source. If you post your script I can try and explain this a little bit better.
    – Joum
    Aug 13, 2013 at 11:11
  • sample script added thanks
    – Dean
    Aug 13, 2013 at 11:44

3 Answers 3

6

EDIT: FULL solution now!

Furthermore, this approach will work in a wide variety of scenarios -- both to stop and restart a layout on a single page, and also to save and re-load a layout on a different page.

First, save the original JSON graph at the end of the layout process, which you can listen for using:

force.on('tick', function(){
    ...
}).on('end', function(){
    // Run this when the layout has finished!
});

Saving now is valuable because x,y coordinates (and some other things) have been added to each node and edge by d3, during the layout (but keep changing, until it comes to a halt). Being JSON, the graph is easy to serialize, stick in localStorage, pull out and parse again:

localStorage.setItem(JSON.stringify(graph));
...
JSON.parse(localStorage.getItem('graph'));

Once you've pulled it out of storage though, you don't just want a JSON object, you want to turn that saved object back into an svg, and ideally, using the apparatus already available with d3.layout.force for simplicity. And in fact, you can do this -- with a few small changes.

If you stick the saved graph right back in, i.e. just run

force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();

with the saved graph, you'll get two weird behaviors.

Weird Behavior 1, and Solution

Based on the good documentation, Including x and y coordinates in the starting graph overrides the random initialization of the layout process -- but only the initialization. So you'll get the nodes where they should be, but then they'll float off into a uniformly distributed circle, as the layout ticks. To keep this from happening, use:

  for(n in graph.nodes){
    graph.nodes[n].fixed = 1
  }

before running force.start().

Weird Behavior 2, and Solution Now your nodes and edges will both be where you want them to be, but your edges will -- shrink?

Something similar has happened, but unfortunately, you can't use exactly the same solution. The edge lengths were saved in the JSON object, and were used in the initialization of the layout, but then the layout imposes a default length (20) on them all, unless you, first, save the edge lengths in the JSON graph --

.on('end', function() {

    links = svg.selectAll(".link")[0]
    for(i in graph.links){
      graph.links[i].length = links[i].getAttribute('length')
    }
    localStorage.setItem('graph', JSON.stringify(graph));

});

and then, before force.start() --

force.linkDistance(function (d) { return d.length })

(documentation for which can be found here) and finally, your graph will look like it's supposed to.

In summary, if you make sure your JSON graph 1) has x,y coordinates on the nodes, 2) has nodes set to fixed=1, and 3) force has linkDistance set before .start(), then you can just run exactly the same layout process as if you were initializing from scratch, and you'll get back your saved graph.

3
  • Your answer led me to correct solution. fixed=1 solved the problems. Do you have any idea how to store graph position on the canvas and zoom levels?
    – Amiga500
    Jan 29, 2016 at 8:59
  • @Wexoni My graph always starts in the same place, and at the same zoom, and then I use '.transform' on it. But so far, I have to re-transform it each time. The transform string can be saved just like the graph though. Jan 29, 2016 at 15:55
  • Thank you for the reply. I managed to find the solution. stackoverflow.com/questions/35085513/…
    – Amiga500
    Jan 29, 2016 at 16:01
0

So, unless I'm mis-reading what's at:

https://github.com/mbostock/d3/wiki/Force-Layout#wiki-nodes

the force layout will actually initialize (or re-initialize if you call resume/start again) the layout with node and edge information specified on the values passed to the nodes/edges functions.

I tested this by using your chart and then on layout end, resuming the force layout. It doesn't recompute the node/edge positions since they're already persisted on the dataset that was initially passed in. You can also test this by adding the x/y values to your initial data.

http://jsfiddle.net/jugglebird/Brb29/1/

force.on("end", function() {
    // At this point dataset.nodes will include layout information
    console.log("resuming");  
    force.resume(); // equivalent to force.alpha(.1);
});
0

It is crucial to keep in mind, that the force layout stores its results in the data itself. That way they are accessible when — within the tick handler function — adjusting the visual nodes and edges to which the data was bound.

When doing its calculations taking into account all forces and constraints the force layout will store the results into the nodes contained in the array of nodes provided to force.nodes(). At the end of each tick, when all calculations are completed, your dataset.nodes array will have been updated with each node containing the new position, velocity etc., thus representing the current state of the force layout.

There is, however, one thing missing to be able to capture the full state of the layout, which is its current value of alpha.

Saving both, dataset and alpha, by whatever means you like, you will later on be able to restore the force layout to the state at the moment these properties where captured. Depending on your needs you might use rather volatile storage like keeping local references to these properties, or JSON.stringify() them to even be able to persist them somehow.

For your own code this could be done as follows:

  1. If you need to completely remove the SVG from the DOM as is done in your callback to the first timeout, it is convenient to put the code which appends the SVG as well as the nodes and edges into a function because you need to call it twice.

    function initChart() {
      svg = d3.select("#chart")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
      //Create edges as lines
      edges = svg.selectAll("line")
          .data(dataset.edges)
          .enter()
          .append("line")
          .style("stroke", "#ccc")
          .style("stroke-width", 1);
    
      //Create nodes as circles
      nodes = svg.selectAll("circle")
          .data(dataset.nodes)
          .enter()
          .append("circle")
          .attr("r", 10)
          .style("fill", function(d, i) {
              return colors(i);
          })
          .call(force.drag);
    }
    
    initChart();              // Append the SVG with nodes and edges.
    

    If, however, it is sufficient to only set it to display:none things become more easy, because you may keep all references intact.

  2. To fully save the state of the layout you need to store the current value of alpha. Afterwards, you call force.stop() to actually immediately halt the force layout. Remember, that your dataset will already have the up-to-date values set.

    var alpha;                // This will save alpha when stopped.
    
    // Stop and remove after 1 second.
    setTimeout(function() {
      alpha = force.alpha();  // Save alpha.
      force.stop();           // Stop the force.
      svg.remove();           // Dump the SVG.
    }, 1000);
    
  3. You may at any time restore the force layout to the saved state. In your example the force layout referenced by force wasn't destroyed, so that it still has the reference to dataset containing the layout's state. But according to the API docs for force.nodes([nodes]), the values present on the nodes supplied as the parameter will also get adopted when setting up a completely new layout. You are then able to resume its execution by setting force.alpha(alpha) to the saved value. Notice, that before the restart of the force layout, the SVG is rebuild by another call to initChart().

    // Restore to paused state and restart.
    setTimeout(function() {
      initChart();            // Append the SVG with nodes and edges.
      force.alpha(alpha);     // Restart the force with alpha.
    }, 3000);
    

Have a look at the full snippet for a demonstration. I have shortened the timeouts to emphasize the effect.

        //Width and height
        var w = 800;
        var h = 600;

        //Original data
        var dataset = {
            nodes: [
                { name: "Adam" },
                { name: "Bob" },
                { name: "Carrie" },
                { name: "Donovan" },
                { name: "Edward" },
                { name: "Felicity" },
                { name: "George" },
                { name: "Hannah" },
                { name: "Iris" },
                { name: "Jerry" }
            ],
            edges: [
                { source: 0, target: 1 },
                { source: 0, target: 2 },
                { source: 0, target: 3 },
                { source: 0, target: 4 },
                { source: 1, target: 5 },
                { source: 2, target: 5 },
                { source: 2, target: 5 },
                { source: 3, target: 4 },
                { source: 5, target: 8 },
                { source: 5, target: 9 },
                { source: 6, target: 7 },
                { source: 7, target: 8 },
                { source: 8, target: 9 }
            ]
        };

        //Initialize a default force layout, using the nodes and edges in dataset
        var force = d3.layout.force()
          .nodes(dataset.nodes)
          .links(dataset.edges)
          .size([w, h])
          .linkDistance([100])
          .charge([-100])
          .start()
          .on("tick", function() {
            edges.attr("x1", function(d) { return d.source.x; })
                 .attr("y1", function(d) { return d.source.y; })
                 .attr("x2", function(d) { return d.target.x; })
                 .attr("y2", function(d) { return d.target.y; });
 
            nodes.attr("cx", function(d) { return d.x; })
                 .attr("cy", function(d) { return d.y; });
          });

        var colors = d3.scale.category10();

        //Create SVG element
        var svg,
            edges,
            nodes;
            
        function initChart() {
          svg = d3.select("#chart")
                      .append("svg")
                      .attr("width", w)
                      .attr("height", h);
  
          //Create edges as lines
          edges = svg.selectAll("line")
              .data(dataset.edges)
              .enter()
              .append("line")
              .style("stroke", "#ccc")
              .style("stroke-width", 1);
  
          //Create nodes as circles
          nodes = svg.selectAll("circle")
              .data(dataset.nodes)
              .enter()
              .append("circle")
              .attr("r", 10)
              .style("fill", function(d, i) {
                  return colors(i);
              })
              .call(force.drag);
        }
        
        initChart();              // Append the SVG with nodes and edges.

        var alpha;                // This will save alpha when stopped.

        // Stop and remove after 1 second.
        setTimeout(function() {
          alpha = force.alpha();  // Save alpha.
          force.stop();           // Stop the force.
          svg.remove();           // Dump the SVG.
        }, 1000);
        
        // Restore to paused state and restart.
        setTimeout(function() {
          initChart();            // Append the SVG with nodes and edges.
          force.alpha(alpha);     // Restart the force with alpha.
        }, 3000);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>D3: Force layout</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <style type="text/css">
    /* No style rules here yet */
  </style>
</head>

<body>
  <div data-role="content" id="p1content">
    <div id="chart"></div>
  </div>
</body>

</html>

9
  • Any idea what's happening with the shrinking edges I'm finding? Jan 4, 2016 at 23:01
  • Have you tried to run the code snippet embedded in my answer? Can you actually see the same error in its output? I don't think this should be an issues any more when sticking to the approach I laid out. Jan 4, 2016 at 23:12
  • That's essentially the code I have already, and I'm setting alpha to zero when initializing the saved layout - the edges still shrink. And, most disturbing, passing edge lengths in initialization didn't seem to work either. Jan 4, 2016 at 23:26
  • It works for me, there are no shrinking edges. Please have a look at this JSFiddle and tell me if the effect can be seen there as well. Jan 4, 2016 at 23:54
  • The fiddle looks fine (and thank you for it) -- it's helped to isolate the problem, anyway, which appears is being driven by calling force.start again, with old data. (Your case simply has one force object being started, stopped, and restarted.) Since I'm bringing in the saved data from another page, I can't restart with the original object, and I thought providing 'length' would override it's initialization, but apparently not? I think that's the issue now, but haven't been able to keep it from happening. Jan 7, 2016 at 5:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.