0

我需要在 javascript 中实现一个特定的网络图。我查看了 InfoVis Toolkit 和 Protovis，但我必须为它们实现自定义布局和大量自定义代码。我不确定它们会增加多少价值。这个小部件需要超级高效，因为它会在许多访问量很大的网页上运行，我不希望小部件减慢任何速度。

该图的节点是 html-rich。下拉菜单、输入元素、弹出窗口等。所以 div 对每个节点都很有意义。我可以简单地使用 AJAX 在 javascript 中创建 div，以从我的服务器读取数据。在 javascript 中实现布局机制，并在通过 jQuery 添加/更新/删除节点时为所有内容设置动画。

我能想到的唯一能阻止我只使用 jQuery 的是节点之间的连接。我该如何画它们？我也许可以在节点下面使用Raphael之类的东西，并在节点位置和 Raphael 之间进行协调，但是在非常简要地查看 Raphael 之后，它看起来很棘手。

还有另一种更简单的方法来绘制节点之间的连接吗？IE 支持至少对于 IE8 来说很重要。优选地，线可以是弯曲的和图案化的（虚线、双线等）以表示不同类型的连接。

更新：我不介意为解决方案付费，例如建议的 mxGraph。到目前为止，只存在于脑海中的解决方案是创建各种连接的透明 PNG 图像。由于我的情况中的节点有点像网格，因此存在最大数量的不同连接图像（虽然会很大），并且由于它们是透明的，因此它们可以相互叠加。说得通？

4

2 回答 2

2

这正是mxGraph的设计目的（我确实在产品上工作），但问题是您是否想要开源解决方案。如果这是预期用途，mxGraph 可以在免费的学术许可下使用。

于 2010-11-15T13:26:51.320 回答
1

您可以使用 RaphaelJS 完成整个图表，而不是尝试仅使用它进行连接，这应该比尝试仅将其用于连接要简单得多。一些演示与您描述的相似（尽管作为演示，要简单得多）。这个显示了拖动节点，它们的连接保持连接。这一个显示鼠标悬停集成。看起来不像任何主要的演示功能都会显示一个弹出窗口以响应点击，但这个概念就在那里。

Raphael 对象是 DOM 元素，因此为您的行为附加处理程序是没有问题的（例如，单击其中一个节点会显示一个菜单，诸如此类），事实上 Raphael提供了一些方便的功能做那个跨浏览器。

于 2010-11-15T11:50:43.910 回答