JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://github.com/jaz303/tipsy/tree/master/src/javascripts/jquery.tipsy.js"></script>
<html>
<head>
</head>
<h1>test
</h1>
<svg id="svg-canvas" width=960 height=600> </svg>

CSS

g.type-TK > rect {
  fill: #77ffd0;
}

text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

/* knoten style zieht fuer alle*/
.node rect {
  stroke: #499;
  fill: #fff;
  stroke-width: 8.5px;
}
.node circle,
.node ellipse,
.node polygon {
  stroke: #333;
  fill: #fff;
  stroke-width: 1.5px;
}

/* pfeile */
.edgePath path {
  fill: none;
}

/* This styles the title of the tooltip */
.tipsy .name {
  font-size: 5.5em;
  font-weight: bold;
  color: #10b1fc;
  margin: 0;
}

/* This styles the body of the tooltip */
.tipsy .description {
  font-size: 1.5em;
}

.tipsy { font-size: 15px; position: absolute; padding: 5px; z-index: 100000; }
  .tipsy-inner { background-color: #FFE; color: #000; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }

  /* Rounded corners */
  .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

  /* Uncomment for shadow */
  .tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }

  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }

  /* Rules to colour arrows */
  .tipsy-arrow-n { border-bottom-color: #000; }
  .tipsy-arrow-s { border-top-color: #000; }
  .tipsy-arrow-e { border-left-color: #000; }
  .tipsy-arrow-w { border-right-color: #000; }

  .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
  .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
  .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid;...

JavaScript

var g = new dagreD3.graphlib.Graph()
  .setGraph({});
//  .setDefaultEdgeLabel(function() { return {}; });
// fuer ausrichtung von links nach rechts, wenn weggelassen bis ";", ausrichtung von oben nach unten
   g.setGraph({
    nodesep: 65,
    ranksep: 50,
    rankdir: "LR",
    marginx: 20,
    marginy: 20
  });


       var states = {
       "hugo1": {style:"fill:#F77", linkit: "<a 	 href='?execo=run+manage+EDIT+XXXXXX+hugo1'> hugo1 </a>"},
       "hugo2": {style:"fill:#F77", linkit: "<a 	 href='?execo=run+manage+EDIT+XXXXXX+hugo2'> hugo2 </a> "},
       "hugo3": {style:"fill:#F77", linkit: "<a 	  href='?execo=run+manage+EDIT+XXXXXX+hugo3'> hugo3 </a>"},
       "hugo4": {style:"fill:#F77", linkit: "<a 	 href='?execo=run+manage+EDIT+XXXXXX+hugo4'> hugo4 </a>"},
       "hugo5": {style:"fill:#87A", linkit: "<a 	 href='?execo=run+manage+EDIT+XXXXXX+hugo5'> hugo5 </a>"},
	   "hugo6": {style:"fill:#87A", linkit: "<a 	 href='?execo=run+manage+EDIT+XXXXXX+hugo6'> hugo6 </a>"},
	   "hugo7": {style:"fill:#87A", linkit: "<a 	 href='?execo=run+manage+EDIT+XXXXXX+hugo7'> hugo7 </a>"}
	   };
 
// Here were setting nodeclass, which is used by our custom drawNodes function
// below.
Object.keys(states).forEach(function(state) {
  var value = states[state];
  value.label = state;                //knotennamen setzen
  value.labeltype = "html";
  value.rx = value.ry = 5;
  g.setNode(state, value);
});
       g.setEdge("hugo1", "hugo2", { curve:d3.curveBasis,style:"stroke:#E46;stroke-width:7px;stroke-dasharray:5,5;",labelStyle:"fill:#DB3;", 	 label:"yyyyy" });
       g.setEdge("hugo1", "hugo3", { curve:d3.curveBasis,style:"stroke:#DB3;stroke-width:3px;stroke-dasharray:5,5;",labelStyle:"fill:#DB3;", 	 label:"zzzzz" });
       g.setEdge("hugo2", "hugo4", { curve:d3.curveBasis,style:"stroke:#DB3;stroke-width:3px;stroke-dasharray:5,5;",labelStyle:"fill:#DB3;", 	 label:"aaaaa" });
       g.setEdge("hugo2", "hugo5", {...