JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<h3>
D3 V4 Force Directed Graph Layout with Bezier Curves
</h3>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Avenir', Helvetica;
}

svg {
  height: 100%;
  width: 100%;
  background: black;
}

.link {
  fill: none;
  stroke: #bbb;
  stroke-linecap: round;
}

.node {
  cursor: pointer;
  fill: #d4b700;
  stroke: #000;
  stroke-width: 1px;
}

text {
  fill: white;
}

.helper {
  opacity: 0.5;
  cursor: default;
}

JavaScript

var graph = {
  nodes: [{ name: "Adam" }, { name: "Bob" }, { name: "Carrie" }, { name: "Donovan" }],
  links: [{ source: 0, target: 1 }, { source: 0, target: 2 }, { source: 1, target: 0 }, { source: 1, target: 1 }, { source: 1, target: 3 }, { source: 2, target: 3 }, { source: 3, target: 2 }]
};

var svg = d3.select('svg');
/* var rect = svg.node().getBoundingClientRect(); */

var width = 500;
var height = 500;

var simulation, helperSim;
var nodes, helperLinks, helperNodes;
var hlink, hnode;
var link, node;
var newLinks, bilinks, intermediateLinks;

var pathgen = d3.line().curve(d3.curveBasis);

function setup() {
  // ============ Simulations ============

  simulation = d3.forceSimulation().force('link', d3.forceLink().distance(40)).force('charge', d3.forceManyBody().strength(500)).force('collide', d3.forceCollide().radius(25)).force('center', d3.forceCenter(width / 2, height / 2)).on('tick', ticked);

  helperSim = d3.forceSimulation().force('link', d3.forceLink().distance(40)) //.strength(0.5))
  .force('charge', d3.forceManyBody().strength(-300)).force('center', d3.forceCenter(width / 2, height / 2));

  helperSim.stop();

  // ============ Nodes and Links ============

  nodes = graph.nodes.slice();
  helperLinks = graph.links.slice();
  helperNodes = graph.nodes.slice();

  hlink = svg.append('g').selectAll('.link');
  hnode = svg.append('g').selectAll('.node');

  link = svg.append('g').selectAll('.link');
  node = svg.append('g').selectAll('.node');

  // ============ Bezier Curves ============

  newLinks = [];
  bilinks = [];
  intermediateLinks = [];

  createBezierCurves(helperLinks, bilinks, intermediateLinks);
}

function createBezierCurves(newLinks, bilinks, intermediateLinks) {
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = newLinks[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion =...