0

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

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

示例（2 和 3 链接到 5；以及 5 和 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

4

2 回答 2

2

您提到的 JGraph 确实具有自动布局功能，mxGraph、github.com /jgraph/mxgraph和 JavaScript 版本也是如此（并且可免费用于非商业用途）

于 2013-01-23T12:20:09.020 回答
0

如果这是在商业场景中，yFiles for HTML似乎很适合您的要求：

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

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

InteractiveGraphSource 演示，

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

使 Node Id Binding 和 Edge Label Binding 为空

并像这样稍微修改模板：

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

于 2012-10-12T07:32:04.380 回答