D3 Force Layout Network

by Soviut

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

var w = 500;
var h = 500;

var svg = d3
    .select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)

var nodes = [
    { label: 'test1', r: 5 },
    { label: 'test2', r: 5 },
    { label: 'test3', r: 5 }
]

var links = [
    { source: 0, target: 1 },
    { source: 1, target: 2 }
]

var sim = d3.forceSimulation()
	.force('link', d3.forceLink().id(function(d) { return d.index }))
  .force("collide",d3.forceCollide( function(d){return d.r + 8 }).iterations(16) )
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(w / 2, h / 2))
  .force("x", d3.forceX(0))
  .force("y", d3.forceY(0))

var node = svg.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("r", function(d) { return d.r })

var link = svg.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(links)
  .enter()
  .append("line")
  .attr("stroke", "black")

var ticked = function() {
	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; })
}

sim
  .nodes(nodes)
  .on('tick', ticked)

sim
  .force('link')
  .links(links)