D3 Examples - D3 force layout with WebAssembly!

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset='utf-8'>
​
​
<style> 
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
​
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
</style>
​
<svg width='960' height='600'></svg>
​
<script>
  window.sqrt = Math.sqrt;
  window.min = Math.min;
</script>
​
<script src='d3-wasm-force.js'></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
​
<script>
  var svg = d3.select('svg'),
    width = +svg.attr('width'),
    height = +svg.attr('height');
​
  var color = d3.scaleOrdinal(d3.schemeCategory20);
​
  d3wasm.loaded
    .then(() => {
​
      d3.json('graph.json', (error, graph) => {
        if (error) throw error;
​
        const simulation = d3wasm.forceSimulation(graph.nodes, true)
          .force('charge', d3wasm.forceManyBody())
          .force('center', d3wasm.forceCenter(width / 2, height / 2))
          .force('link', d3wasm.forceLink().links(graph.links).id(d => d.id))
          .stop();
       
        var link = svg.append('g')
          .attr('class', 'links')
          .selectAll('line')
          .data(graph.links)
          .enter().append('line')
            .attr('stroke-width', d => Math.sqrt(d.value));
      
        var node = svg.append('g')
            .attr('class', 'nodes')
          .selectAll('circle')
          .data(graph.nodes)
          .enter().append('circle')
            .attr('r', 5)
            .attr('fill', d => color(d.group))
            .call(d3.drag()
                .on('start', dragstarted)
                .on('drag', dragged)
                .on('end', dragended));
      
        function ticked() {
          simulation.tick();
          link
              .attr('x1', d => d.source.x)
              .attr('y1', d => d.source.y)
              .attr('x2', d => d.target.x)
              .attr('y2', d => d.target.y);
      
          node
              .attr('cx', d => d.x)
              .attr('cy', d => d.y);
        }
      
        setInterval(ticked, 25);
        
        function dragstarted(d) {
          if (!d3.event.active) simulation.alphaTarget(0.3).restart();
          d.fx = d.x;
          d.fy = d.y;
        }
​
        function dragged(d) {
          d.x = d3.event.x;
          d.y = d3.event.y;
          d.fx = d.x;
          d.fy = d.y;
        }
​
        function dragended(d) {
          if (!d3.event.active) simulation.alphaTarget(0);
          d.fx = null;
          d.fy = null;
        }
      });
  });
</script>
​
    