86 lines · html
1<!DOCTYPE html>2<meta charset="utf-8">3<body>4<script src="https://d3js.org/d3.v7.min.js"></script>5<script src="https://unpkg.com/@hpcc-js/wasm@2.20.0/dist/graphviz.umd.js"></script>6<script src="https://unpkg.com/d3-graphviz@5.6.0/build/d3-graphviz.js"></script>7<div id="graph" style="text-align: center;"></div>8<script>9var dotSrc = `10<INSERT_DOT>11`;12 13var dotSrcLines;14// Label to assembly line mapping15var labelAsm = {};16// regex to find node label line17const re = /^"(?<node>[^"]+)" \[label="\1/;18var graphviz = d3.select("#graph").graphviz();19 20function render() {21 var t = d3.transition().delay(100).duration(500);22 graphviz.transition(t).renderDot(dotSrc).on("end", interactive);23}24 25function setup() {26 dotSrcLines = dotSrc.split('\n');27 console.log("Removing assembly lines from nodes");28 // find the assembly line for each label and preserve it in labelAsm29 for (i = 0; i < dotSrcLines.length;) {30 console.log("checking line %d: %s", i, dotSrcLines[i]);31 match = dotSrcLines[i].match(re);32 if (match && dotSrcLines[i+2].startsWith(' ')) {33 console.log(match);34 node = match.groups['node'];35 console.log('Found node "%s" on line %d', node, i);36 labelAsm[node] = dotSrcLines[i+2];37 console.log(labelAsm);38 console.log('Deleting line %d: %s', i+2, dotSrcLines[i+2]);39 dotSrcLines.splice(i+2, 1);40 i = i+3;41 } else {42 i++;43 }44 }45 dotSrc = dotSrcLines.join('\n');46 render();47}48 49function interactive() {50 nodes = d3.selectAll('.node');51 nodes.on("click", function () {52 var title = d3.select(this).selectAll('title').text().trim();53 var text = d3.select(this).selectAll('text').text();54 var id = d3.select(this).attr('id');55 var class1 = d3.select(this).attr('class');56 dotElement = title.replace('->',' -> ');57 console.log('Element id="%s" class="%s" title="%s" text="%s" dotElement="%s"', id, class1, title, text, dotElement);58 console.log('Inserting assembly line for "%s"', dotElement);59 for (i = 0; i < dotSrcLines.length;) {60 var match = dotSrcLines[i].match(re);61 if (match) {62 var node = match.groups['node'];63 if (node === dotElement) {64 // check if we have an assembly line65 var asm = labelAsm[node];66 if (asm) {67 // toggle the assembly line68 if (dotSrcLines[i+2].startsWith(' ')) {69 dotSrcLines.splice(i+2, 1);70 } else {71 dotSrcLines.splice(i+2, 0, asm);72 }73 break;74 }75 }76 }77 i++;78 }79 dotSrc = dotSrcLines.join('\n');80 render();81 });82}83 84setup();85</script>86