Question

我已经花了几个小时寻找符合我要求的工具，但似乎找不到任何东西。

我想要的工具（无论技术如何）都应该能够绘制动作链接的图表。现在特殊的事情是，动作不仅可以分裂（然后常规树就足够了），它们也可以合并。

示例（2＆amp; 3链接到5; 5＆amp; 6链接到7）

Action 1  -> Action 2  -> Action 5   -> action 7
          -> action 3
          -> action 4  -> Action 6

有很多图表工具（jointJs，jGraph，jGraphUI，jsPlumb，..）工作正常，但问题是你需要自己指定项目的坐标。

由于数据是动态的，手动指定数据太多了。你知道具有我需要的功能的简单工具（不需要编辑图表，只是为了显示它）吗？（只要它可以在Web上下文中运行就可以了，所以JS，flash，canvas都是候选者）

谢谢， PJ

Answer 1

你提到的JGraph确实有自动布局，mxGraph，github.com/jgraph/mxgraph，JavaScript版本（并且可以免费用于非商业用途）

Answer 2

如果是在商业场景中，yFiles for HTML似乎非常符合您的要求：

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

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

InteractiveGraphSource Demo，

等到它加载，然后切换到顶部组合框中的示例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}, 
]

源节点绑定：

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工作，但我不代表我的雇主。

JS / HTML或FLASH动作图显示器

2 个答案: