Javascript 在HTML5中呈现互连元素网络的最佳方法？

我正在寻找在HTML5中呈现相互关联元素网络的最佳方法

例如，假设我有以下文档：

firstObject = { other1: secondObject; other2: thirdObject }
secondObject = {other1: thirdObject}
thirdObject = {other1: firstObject}

例如，我想将它们呈现为圆形，在相互引用的文档之间用线连接

我不确定实现这样的东西的最佳方式是什么：我使用画布吗？如果是这样的话，我将如何在仅给出上述数据的情况下正确地布局画布（如何定位元素，以便在给定互连的情况下在元素之间绘制线？）

---

我不是在寻找代码，只是一个关于从何处开始以及如何开始的建议。

对于一些不需要大量交互的几何图形，从设计的角度来看，不应该表示大量的文本信息，

画布

是最明确的方法。我们现在已经走过了

canvas

还是beta版的时代，现在它已经得到了所有主流浏览器的支持

首先，我要考虑数据中的变量。多少自由度？如何改变每个变量的表示形式？例如，如果要显示的每个文档都有一个（数字）属性，例如文档的大小，则可以更改表示文档的形状的大小

您可能还需要考虑如何定位元素。每个点的x和y坐标代表什么？如果你没有任何有意义的东西可以用坐标来表示，你希望如何随机排列这些点——换句话说，你希望图片看起来像什么

一旦你解决了这些设计问题，剩下的就是学习编码画布：看一看Mozilla提供的教程和曾经流行的教程。

我实际上用它来完成这项工作

结果如下：

您可以通过创建一个包含节点（任何数据都可以在其中，在本例中，只有标题）和连接（节点数组中索引之间的链接）的json文件来实现类似的功能。D3然后加载这个json文件，并用一点代码将其呈现在一个文件中

---

正如你所看到的，这些都是流行游戏中的系统——我将它们的数据库转储，并编写了一个C#程序，从它们数据库中的系统数据生成这种json数据。

我现在会选择canvas，但我个人没有使用它的经验。刚刚看到它能做什么。复杂但很好的问题。我会沿着计算元素角度和距离的思路，创建一个1px宽的

div

，元素之间的角度正确，距离也正确。需要更多信息：）你能描述你的数据模式及其关系吗？@markE非常简单，只是一个链接到另一个（或多个其他链接），这些对象需要正确定位，才能与线链接在一起，而不会与其他对象相交。实际上，我也可以使用SVG来实现这一点——感谢链接和洞察力。