如何在HTML中生成非常复杂的树结构

Question

在我们的游戏中，我们有一个典型的技术树，目前是手工编辑的 - 非常难以维护和容易出错：http://igmarauders.isotx.com/library/images/a/a3/Techtree-july26-2011-vehicles-resized.png

如果可能的话，我想在HTML表单中生成这个，但我不知道从哪里开始。也许这里的人们已经解决了类似的问题，可以指出我正确的方向吗？

一些技术细节：

• 每个节点都是一个实体，具有唯一的ID（编号）
• 每个实体都有一个先决条件列表（其他实体）
• 启动技术（左侧）是一组实体
• 只有可以追溯到起始技术的实体才会显示在地图中
• 研究级别（顶部的列）是每个实体可用的属性
• 相同类型但不同级别的实体（例如Assault Archos LvL 1，Assault Archos LvL 2）通过属性从较高级别链接到较低级别（并且较高级别始终具有较低级别作为先决条件也是如此）
• 我们可以通过实体类型，每个实体属性来区分Technology（上部）和Vehicles（下部）。
• 实际名称也是每个实体的属性，对于树本身并不重要

最后：

• 你可以忽略实线和虚线之间的区别（我甚至不知道它的区别是什么）
• 将一个研究项目解锁的车辆组合在一起的箱子很不错，但不是必需的

提前致谢。我在谷歌上搜索过，但我发现的所有“复杂树”例子与我的相比都很幼稚：）

编辑：以下是一些JSON格式的示例数据：http://pastebin.com/Fa3JcnRw

编辑2 ：另外，如果重要，我们在服务器端使用PHP，但我愿意接受替代方案 - 例如，我们可以在构建脚本中生成静态HTML。

Answer 1

我已经将另一个想法混在一起，你可以看到它 http://jsfiddle.net/jedidiah/sTj3E/4/embedded/result/

我们的想法是只列出每个级别的列中的所有项目，然后当您点击其中一个项目时，它会突出显示所需的技术。

我认为让你的头脑比所有的线更容易，认为它不会一目了然地给你概述，你必须点击。

编辑：您可以在此处查看代码http://jsfiddle.net/jedidiah/sTj3E/4/，原谅这种混乱，只是一个简单的例子来了解这个想法。

Answer 2

所以，虽然我不能给你一个工作的演示，因为我根本没有时间找出所有的连接，这就是我的建议;

您想要的实际上是基于系统原始数据的复杂流程图。为了使它像你的例子那样创建结构是不可能的。可以建立的连接太复杂，无法使用您提供的有限数据...

但是，可以制作包含所有项目和关系（行）的html结构（网格）。

这些行本身很容易here is a plugin，这将允许您与不少于3个流行的JS库（jQuery，Mootools，YUI3）建立实际连接。从那里，您可以在html节点之间构建所需的结构。

我会将节点保存在一个表中，您可以根据它们的级别从那里分配2d网格中的默认位置，但是从那里它需要一些人工输入，可能是拖放系统，这会移动节点到网格中的不同位置，做一些crud动作。

这绝对是可能的，但是很多工作。问题是你正在尝试做几乎与Visio功能匹配的东西。

如果你不能胜任这项任务，我建议你采取不同的方式来形象化关系。像@Jedidiah那样的事情是一个好的开始。

如果有其他人希望使用这个插件/想法做点什么我祝他们好运，我现在没有时间，对不起。

Answer 3

如果您无法调整或扩展现有内容，您肯定需要使用canvas。

（看起来你做了很多工作 - 但很有意思。）

Answer 4

没有一个简单的解决方案。

我建议考虑为这棵树生成一个SVG（标准矢量图形）文件。 SVG基本上是一个XML文件，它使用坐标，填充，渐变等来描述画布上的各种对象。所有现代浏览器都内置了对SVG文件的支持。

您可以使用PHP或几乎任何语言来生成SVG文件的XML代码。

我已经玩了一点点，如果你创建一些XML模板然后只替换从一个元素到另一个元素不同的部分，我发现它非常有用。让我举个例子：在你的图表中，你有蓝色方框，里面有文字。这可能是您为其创建模板XML的单元（您可以使用InkScape，然后只查看它创建的SVG文件）。然后只需替换XML代码中的坐标和文本。 PHP中的“sprintf”是一个很好的工具。

使用SVG有一些很大的优势： - 文件非常小 - 完全可缩放而不会降低质量（因为它是基于矢量而不是基于像素的）。 - 可以在网页中显示为嵌入对象。

编写代码需要一段时间，毫无疑问，但它会产生高质量的结果。