Javascript JS/HTML或FLASH动作图显示器

我已经花了几个小时寻找一个符合我要求的工具，但似乎什么也找不到

我想要的工具（不管技术如何）应该能够绘制一个连接动作的图表。现在特别的是，动作不仅可以拆分（那么一个普通的树就足够了），它们还可以合并

示例（2&3链接到5；5&6链接到7）

有很多绘图工具（jointJs、jGraph、jGraphUI、jsPlumb等）工作得很好，但问题是您需要自己指定项目的坐标

由于数据是动态的，手动指定此项工作太多。 你知道简单的工具（不需要编辑图表，只需要显示它）具备我所需要的功能吗？（只要它可以在web环境中运行就可以了，所以JS、flash和canvas都是候选）

谢谢，

---

Pj

如果这是在商业场景中，则似乎很适合您的需求：

它是一个纯Javascript图表解决方案，不需要活动服务器组件或插件。它可以轻松地处理一般图形，并具有非常复杂的自动布局算法

网站上有一个现场演示，您可以在其中尝试您的确切场景： 使用支持HTML5的浏览器并将其指向：

,

等待加载，然后在顶部的组合框中切换到示例4，并在右侧的文本框中填写以下值：

节点来源：

{
1:'Action 1', 
2:'Action 2', 
3:'Action 3',
4:'Action 4', 
5:'Action 5', 
6:'Action 6',
7:'Action 7'
}

[
{from:1, to:2}, 
{from:2, to:5}, 
{from:3, to:5}, 
{from:6, to:7}, 
{from:5, to:7}, 
{from:1, to:3}, 
{from:4, to:6}, 
]

边缘来源：

{
1:'Action 1', 
2:'Action 2', 
3:'Action 3',
4:'Action 4', 
5:'Action 5', 
6:'Action 6',
7:'Action 7'
}

[
{from:1, to:2}, 
{from:2, to:5}, 
{from:3, to:5}, 
{from:6, to:7}, 
{from:5, to:7}, 
{from:1, to:3}, 
{from:4, to:6}, 
]

源节点绑定：

from

to

目标节点绑定：

from

to

使节点Id绑定和边缘标签绑定为空

并稍微修改模板，如下所示：

<rect fill='AliceBlue' stroke='LightBlue' stroke-width='2' width='{TemplateBinding width}' height='{TemplateBinding height}'></rect><text transform='translate(10 20)' data-content='{Binding}' style='font-size:18px; font-family:Arial; fill:#000; text-anchor: left; dominant-baseline: central;'></text>

完成后，按左上角的“应用图形源”按钮，观看图形的动画和在中央画布中的显示。然后，您可以使用鼠标平移、鼠标滚轮缩放并通过单击节点选择节点来导航图形，或者使用键盘导航在节点之间切换

这只是该库的一个演示，但演示已经相当强大了。您还可以评估库，并针对庞大的API进行“真正的编程”

---

披露：我在yWorks工作，但我在这里不代表我的雇主。

JGraph，你提到的，确实有自动布局，就像mxGraph一样，JavaScript版本（并且免费用于非商业用途）

嗨，这正是我们需要的解决方案，但我们是一个非商业（教育）组织，而且可能买不起这个软件。有没有开源的变体也这样做？你好，Pj