Old school D3 from simpler times

All examples By author By category About

RosaRomeroGomez

Full window Github gist

Update Force-Directed Layout D3.v4 Different Datasets

Sometimes you find situations in which some user action results in loading a new dataset for your force-directed graph. This update action may result either in the display of a completely new force-directed graph or a subset of such graph. To address this need, this is my approach using the enter-update-exit pattern for the force-directed graph in D3.v4.

It seems to work pretty decently, but if you find any bugs or suggestions, please feel free to tell me.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.update {
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  margin: 10px;
  cursor: pointer;
}
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
</style>

<svg width="960" height="600"></svg>
<div class="update"><p>dataSource1.json</p></update>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
/** GLOBAL VARIABLES **/
var dataIndex=1;
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));
var linkGroup = svg.append("g")
                  .attr("class", "links");
var nodeGroup = svg.append("g")
                  .attr("class", "nodes");
/** GLOBAL VARIABLES **/
/** Button to swap over datasets */
d3.select(".update")
               .append("button")
                 .text("Swap datasets")
                 .on("click",function(){
                     if (dataIndex==1) {
                         dataIndex=2;  
                     } else   {
                         dataIndex=1;
                     }
               
     update(dataIndex);
     d3.select("p").text("dataset"+dataIndex+".json");
 });
 /** Button to swap over datasets */
function update (dataIndex) {
  d3.json("dataSource" + dataIndex + ".json", function(error, graph) {
      if (error) throw error;
    // Update links
     var link = linkGroup
                  .selectAll("line")
                  .data(graph.links);
     link.exit().remove();
      // Enter links
      var linkEnter = link.enter().append("line").attr("stroke-width", function(d) {return Math.sqrt(d.value); });
      link = linkEnter.merge(link);
      // Update nodes
      var node = nodeGroup
                      .selectAll("circle")
                       .data(graph.nodes);
      node.exit().remove();
      //Enter nodes
      var nodeEnter = node.enter().append("circle") 
                                    .attr("r", 5)
                                    .attr("fill", function(d) { return color(d.group); })
                                    .call(d3.drag()
                                        .on("start", dragstarted)
                                        .on("drag", dragged)
                                        .on("end", dragended));
      node = nodeEnter.merge(node);
      node.append("title")
          .text(function(d) { return d.id; });
      simulation
          .nodes(graph.nodes)
          .on("tick", ticked);
      simulation.force("link")
          .links(graph.links);
      simulation.alpha(1).restart();
     
      function ticked() {
        link
            .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; });
        node
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
      }
    });
} 
update(dataIndex);
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}    
</script>

https://d3js.org/d3.v4.min.js