I'm trying to draw below structure using HTML CSS JS/JQuery. It's actually a UI for a kind of path tracer where I'll change the color of edges and nodes to indicate visited nodes and edges.
This is drawn on canvas and is my target to achieve. Initially it will show like this, and after running some algorithm, some nodes end edges will be colored differently to show the path travelled.
What I've tried: Initially I've checked some libraries like GoJs but their graphs were either changing their layout on each refresh(which will cause me problem when updating the node colors) OR they were very complicate for the newbie me. So I tried to assemble one from scratch with below steps:
(1) From the above image, first I've extracted the coordinates of nodes using mobilefish.com and stored them in a list. Used them to position nodes on my page. (Although nodes are visible but I'm having problem in scaling them down relative to the section on my page where I'm presenting the graph.)
(2) created a node template in HTML and used Jquery to insert several copy (with unique dynamic id) in a div(later I changed this container to svg because drawing edge lines was tough).
<div class="fa-stack graph-node fa-2x">
<i id="2" class="fas fa-circle fa-stack-2x"></i>
<p class="fas fa-stack-1x">C2</p>
<!-- Actually used back-tick string to give unique id -->
</div>
(3) created an edge line HTML template and inserted same as in (2).
<line id="${src}_${dest}" class="graph-edge" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"/>
<!-- enclosed in back-ticks -->
I've also used absolute positioning and z-index so that things don't coverup or collide with each other.
However, results are not satisfying. Infact when using div, nodes were visible(though not scaled) and trouble in creating edges but when using svg as container, nothing is rendering even though the z-index of svg(as conainer) is smaller than edges and nodes.
Although, If I hardcode the elements(tested by only couple of nodes and edges) instead of using JQuery to append all of them dynamically, both edges and nodes are visible.
How can I acheive the above show result with functionality of coloring dynamically?
