JSFiddle - React, Tailwind, and code Playground

by A B Jones

HTML

<div id='GraphDiv'>

</div>

CSS

.link {
  stroke: grey;
}

JavaScript

var thisData = [{
  "App_Name": "App_01",
  "App_No": "A1",
  "Server_Name": "Server_01",
  "Server_No": "S1"
}, {
  "App_Name": "App_01",
  "App_No": "A1",
  "Server_Name": "Server_02",
  "Server_No": "S2"
}, {
  "App_Name": "App_01",
  "App_No": "A1",
  "Server_Name": "Server_03",
  "Server_No": "S3"
}, {
  "App_Name": "App_01",
  "App_No": "A1",
  "Server_Name": "Server_04",
  "Server_No": "S4"
}, {
  "App_Name": "App_02",
  "App_No": "A2",
  "Server_Name": "Server_03",
  "Server_No": "S3"
}, {
  "App_Name": "App_02",
  "App_No": "A2",
  "Server_Name": "Server_04",
  "Server_No": "S4"
}, {
  "App_Name": "App_02",
  "App_No": "A2",
  "Server_Name": "Server_05",
  "Server_No": "S5"
}, {
  "App_Name": "App_03",
  "App_No": "A3",
  "Server_Name": "Server_05",
  "Server_No": "S5"
}, {
  "App_Name": "App_03",
  "App_No": "A3",
  "Server_Name": "Server_06",
  "Server_No": "S6"
}, {
  "App_Name": "App_03",
  "App_No": "A3",
  "Server_Name": "Server_07",
  "Server_No": "S7"
}];



//window.onload = function() {

var width = 750,
  height = 750,
  counter = 0;

var force = d3.layout.force()
  .linkDistance(50)
  .charge(-100)
  .size([width, height]);

var scaleFactor = 1;
var translation = [0, 0];




//d3.csv("Data/BubbleData.csv", function (error, links) {
console.log('linenumber')
var X = d3.scale.linear()
  .domain([0, width])
  .range([0, width]);

var Y = d3.scale.linear()
  .domain([0, height])
  .range([height, 0]);

//handle zooming
var zoom = d3.behavior.zoom()
  .scaleExtent([0.1, 10])
  //allow 10 times zoom in or out
  .on("zoom", zoomed);

function zoomed() {
  // console.log("zoom", d3.event.translate, d3.event.scale);
  scaleFactor = d3.event.scale;
  translation = d3.event.translate;

  tick(); //update positions
}



var svg = d3.select("#GraphDiv")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .call(zoom);


var rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
 ...