JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topologyArea"></div>

CSS

.background { /*stroke: gray; stroke-width: 1px; fill: rgb(252,231,216);*/ cursor: move; }
.link { stroke: #000;  stroke-width: 1.5px; }
.node { fill: #ccc;  /*stroke: #000;*/  stroke-width: 1.5px; cursor: pointer;}
.node.fixed { fill: #f00; cursor: pointer;}
text { font: 10px sans-serif; pointer-events: none; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; }

JavaScript

var  nodes = [//it's not necessary to give x and y values to nodes. One gets created for every empty object you insert here like this {}
	{id: 1, x: 470, y: 410, icon: "images/abc.jpg"},
    {id: 2, x: 493, y: 364, icon: "images/abc.jpg"},
    {id: 3, x: 442, y: 365, icon: "images/abc.jpg"},
    {id: 4, x: 467, y: 314, icon: "images/abc.jpg"},
    {id: 5, x: 477, y: 248, icon: "images/fsd.jpg"},
    {id: 6, x: 425, y: 207, icon: "images/sdfs.jpg"},
    {id: 7, x: 402, y: 155, icon: "images/dfs.jpg"},
    {id: 8, x: 369, y: 196, icon: "images/abc.jpg"},
    {id: 9, x: 350, y: 148, icon: "images/abc.jpg"},
    {id: 10, x: 539, y: 222, icon: "images/abc.jpg"},
    {id: 11, x: 594, y: 235, icon: "images/abc.jpg"},
    {id: 12, x: 582, y: 185, icon: "images/abc.jpg"},
    {id: 13, x: 633, y: 200, icon: "images/abc.jpg"}
  ];
var links = [
    {id: 1, source:  0, target:  1},
    {id: 2, source:  1, target:  2},
    {id: 3, source:  0, target:  2},
    {id: 4, source:  1, target:  3},
    {id: 5, source:  3, target:  2},
    {id: 6, source:  3, target:  4},
    {id: 7, source:  4, target:  5},
    {id: 8, source:  5, target:  6},
    {id: 9, source:  5, target:  7},
    {id: 10, source:  6, target:  7},
    {id: 11, source:  6, target:  8},
    {id: 12, source:  7, target:  8},
    {id: 13, source:  9, target:  4},
    {id: 14, source:  9, target: 11},
    {id: 15, source:  9, target: 10},
    {id: 16, source: 10, target: 11},
    {id: 17, source: 11, target: 12},
    {id: 18, source: 12, target: 10}
  ];

var margin = {top: -5, right: -5, bottom: -5, left: -5},  width = 960 - margin.left - margin.right,  height = 500 - margin.top - margin.bottom;
var iconOffset = -10, iconSize = 20;
var mousedown_node = null, mouseup_node = null, mousedown_link = null;
var nodeDeletionActivated = false;

var zoom = d3.behavior.zoom().scaleExtent([0.2, 2]).on("zoom", zoomed);

var svg = d3.select("#topologyArea").append("svg").attr("width", width + margin.left +...