JSFiddle - React, Tailwind, and code Playground

by Manoj Pal

CSS

body
{
    background: lightskyblue;
}

.node {
    stroke: black;
    stroke-width: 4.0px;
}

.link {
      stroke: slategray;
      stroke-opacity: 0.6;
      fill: none;
      stroke-width: 1.5px;
}

JavaScript

var width = 1280, height = 630;
var color = d3.scale.category20();
var svg   = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height", height)
              .style("border","7px solid black")
              ;


var nodes = [], links = [];
var graph = test_case();
    nodes = graph.nodes;
    links = graph.links;

for(var i = 0; i < nodes.length; i++)
{
    element = nodes[i];
    if(element.group == 0)
    {
        element.x = width/2;
        element.y = height/2;
        element.fixed = true;
    }
}// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 45)
    .attr("refY",-5.2)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var force = d3.layout.force()
                     .charge(-400)
                     .linkDistance(300)
                     .size([width, height])
                     .links(links)
                     .nodes(nodes)
                     .on("tick", tick);

var node = svg.selectAll(".node"),
    link = svg.selectAll(".link");

drawGraph();

function test_case()  
{
    graph = 
    {
      "nodes":[
        {"name":0,"group":0,"pos":[216,140]},
        {"name":1,"group":1,"pos":[350,200]},
        {"name":2,"group":1,"pos":[478,438]},
        {"name":3,"group":1,"pos":[596,498]},
        {"name":4,"group":1,"pos":[422,295]},
        {"name":5,"group":1,"pos":[597,357]},
        {"name":6,"group":1,"pos":[530,238]},
        {"name":7,"group":1,"pos":[506,100]},
        {"name":8,"group":1,"pos":[793,265]},
        {"name":9,"group":1,"pos":[972,228]}   
      ],
      "links":[
        {"source":1,"target":2,"rssi":25,"lqi":25,"lr":120},
       ...