Javascript 如何将SVG元素绑定到数据？

我正在寻找关于我设计Javascript/SVG接口的编码技术的反馈。我是这些语言的新手，因为我最近放弃了AdobeFlex专业

该软件将是一个通用接口，用于将源信号映射到目标信号。连接由网格表示，行/列表示源/目标信号：

X X X X | destination A X O X X | destination B X X X X | destination C X X X X | destination D --------- 1 2 3 4 X |目的地A X X X |目的地B X |目的地C X |目的地D --------- 1 2 3 4 在这个漂亮的图中，“0”表示源“信号2”映射到“目的地B”

我关心的是将数据（连接对象）绑定到视图（SVG元素）。我是这样做的：

数据存储在2D数组中：connections[nSources][mDestinations]

在视图中，对于2D连接数组中的每个项目，我创建了一个SVG元素，其ID为“celln，m”（“n，m”对应于其行/列索引），并将其添加到DOM中。我发现这是访问任何SVG元素的一种非常简单的方法，使用document.getElementById（…），或者通过解析“evt.target.id”字符串来查找用户单击的行/列

第一个实现运行良好。但我很担心，因为接口需要支持处理动态数据。。。源/目的地信号将动态添加或删除。行和列可以由用户重新排列。它还需要支持将信号分组为可扩展和可折叠节点

一个简单的例子：如果在索引0处添加新行，我需要更新每个SVG元素的ID，以将其行增加1

我的具体问题是：这么频繁地操作DOM元素的ID（良好实践、安全和可靠）可以吗

要查看代码示例（操作SVG元素ID的函数），请参见以下内容：

---

在200x200的网格中（例如），在索引0处添加一行意味着更改40000个SVG元素的ID，这似乎很可怕。有人认为这有问题吗？

无论如何，您将使用DOM操作来实现您的目标。建议：使用MVC模式。每当用户添加/删除行或重新排列它们时，您修改的不是DOM，而是模型。然后调用一些重新绘制SVG的侦听器/回调。就我个人而言，我会从DOM中分离整个表（例如，我会保留一个父级

中的所有行）（使用

删除
操作，或者类似smth的操作。您使用什么库？）。然后，我将在内存中重新创建它，然后再将其附加（
appendChild
到该组）。这种方法似乎足够简单和快速。
很酷。目前我没有使用任何库，只使用纯JS和SVG（因为我想在使用更高级的库之前先学习它们）。我现在将研究MVC。但是我在想，如果我每次都重新绘制表格，我会不会失去制作SVG元素动画的可能性？例如，插入一行时，我可以设置其他行的动画以向下滑动。请给我一点时间清理/最小化代码，这样我可以发布一个示例。动画不是问题。您只需在初始状态下绘制表格。然后使用
执行幻灯片。感谢您的建议，MVC绝对是一个很好的方法。我使用svg匹配数据，我现在正在尝试避免使用库，以便学习Javascript。我看了d3，它似乎主要用于数据可视化。。我担心有一个更大的学习曲线，使用它来创建一个完全定制的用户界面。