Javascript HTML CSS JS图形可视化

我正在尝试使用HTML CSS JS/JQuery绘制以下结构。它实际上是一种路径跟踪器的UI，我将更改边和节点的颜色，以指示访问的节点和边

这是在画布上绘制的，是我要实现的目标。最初它将显示为这样，运行某些算法后，一些节点的端边将以不同的颜色显示所走过的路径

我所尝试的： 最初，我检查了一些库，如GoJs，但它们的图形要么在每次刷新时更改布局（这会在更新节点颜色时给我带来问题），要么对新手来说非常复杂。因此，我尝试通过以下步骤从头组装一个：

（1） 从上图中，我首先使用提取节点的坐标，并将其存储在列表中。使用它们在我的页面上定位节点。（虽然节点是可见的，但相对于页面上显示图形的部分，我在缩小它们时遇到了问题。）

（2） 在HTML中创建了一个节点模板，并使用Jquery在一个div中插入几个副本（具有唯一的动态id）（后来我将此容器更改为svg，因为绘制边缘线很困难）

C2

（3） 创建了一个边缘线HTML模板，并插入了与（2）相同的内容

我还使用了绝对定位和z索引，这样东西就不会相互掩盖或碰撞

然而，结果并不令人满意。事实上，当使用div时，节点是可见的（虽然没有缩放），并且在创建边时会遇到麻烦，但是当使用svg作为容器时，即使svg（作为容器）的z索引小于边和节点，也不会渲染任何内容

尽管如此，如果我硬编码元素（仅由两个节点和边测试），而不是使用JQuery动态附加所有元素，那么边和节点都是可见的

---

如何使用动态着色功能实现上述显示结果？

以下是我认为您需要做的一个示例：

如果在进行更改时不希望节点移动，则节点不必移动，如单击图表下方的按钮时所示。 要防止在添加或删除节点或链接时发生布局，请在图表上将布局.isongoong属性设置为false