JSFiddle - React, Tailwind, and code Playground

by fliptheweb

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Graph Editor</title>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script type="text/javascript">

    var node_params;
    var mynodes = [];
    var mylinks = [];


    let maxDegree = 0;
    let maxWeigth = 0;
    let width = 800;
    let height = 800;


    function initialize(initNodes, initNodeParams, initLinks) {
      mynodes = initNodes;
      node_params = initNodeParams;
      mylinks = initLinks;

      if (!0) {
        let rawNodes = [];

        let delta = 0.1;
        for (i = 0; i < mynodes.length; i++) {
          let newRawNode = null;

          //fixing correct positions for target nodes
          if (mynodes[i].type == 'bad_node') {
            newRawNode = {
              'index': mynodes[i].index,
              'name': mynodes[i].name,
              'type': mynodes[i].type,
              'degree': mynodes[i].degree,
              'fx': width * (1 - delta),
              'fy': height / 2
            };
          } else if (mynodes[i].type == 'nice_node') {
            newRawNode = {
              'index': mynodes[i].index,
              'name': mynodes[i].name,
              'type': mynodes[i].type,
              'degree': mynodes[i].degree,
              'fx': width * delta,
              'fy': height / 2
            };
          } else {
            //for non-target nodes there x-s and y-s will be added after forceSimulation
            newRawNode = {
              'index': mynodes[i].index,
              'name': mynodes[i].name,
              'type': mynodes[i].type,
              'degree': mynodes[i].degree
            };
          }
          //needed for normalization later
          if (mynodes[i].degree > maxDegree) {
            maxDegree = mynodes[i].degree;
          }

          rawNodes.push(newRawNode);
        }
        var layout = d3
          .forceSimulation(rawNodes)
          .tick(5)
...