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

Question

我正在寻找在HTML5中呈现互连元素网络的最佳方式。

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

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

我想将这些渲染为例如圆圈，在相互引用的文档之间连接线条。

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

我不是在寻找代码，只是建议在哪里以及如何开始。

Answer 1

对于不需要大量交互的几何图形，从设计的角度来看，不应该代表很多文本信息，canvas是最明确的方法。我们现在已经过了canvas仍处于测试阶段的日子 - 现在它已得到所有主流浏览器的支持。

我首先考虑数据中的变量。多少自由度？我如何改变每个变量的表示？例如，如果您希望显示每个文档的（数字）属性，例如文档的大小，则可能会改变表示文档的形状的大小。

您可能还想考虑如何定位元素。 x和y坐标代表每个点的含义是什么？如果您没有可能由坐标表示的任何有意义的内容，您希望如何随机排列这些点 - 换句话说，您希望图片看起来像什么？

一旦你弄清楚了这些设计问题，剩下的就是学习编码canvas的问题：看看Mozilla MDN提供的教程和流行的{{3} }}

Answer 2

我实际上最终使用D3.js来完成这项工作。

结果如下：

你可以通过制作一个带有节点的json文件（任何数据都在其中，在这种情况下，只是标题）和连接（链接，节点数组中的索引之间）来实现这样的事情。 D3然后加载这个json文件，并使用一些代码可以在Force Directed Layout中呈现它。

正如您所看到的，这些是来自流行游戏EVE Online的系统 - 我进行了数据库转储，并编写了一个C＃程序，从其数据库中的系统数据生成此类json数据。