如何在 Javascript 中说明多重图？ [关闭]

Posted 2023-05-08

【中文标题】如何在 Javascript 中说明多重图？ [关闭]

【英文标题】：How to illustrate multigraphs in Javascript? [closed]

【发布时间】：2012-01-08 15:50:39

【问题描述】：

这个问题正在寻找一种使用 javascript 绘制多重图的实用且简单的方法。

首先看this的问题。这些库都不支持 Multigraphs （或 Pseudographs ）。我的意思是我不能生成这样的图表：

是否有任何 jQuery 插件（或 javascript 库）用于此目的？

我想我可以使用WolframAlpha's API 并使用它的图像，比如this：

但它有很多问题：

我无法以交互方式移动节点或添加删除边。

每月只有 2000 次 API 调用。不够。

我无法生成大图或中间图。

他们真的很丑！

如果您知道一些用于绘制 Multigraphs 的 JavaScript 库，或者无论如何生成这样的图（类似于 Dracula Graph Library 但能够绘制 Multigraphs），请帮助我。

【问题讨论】：

您确定需要在 javascript 中制作它们吗？

是的，它需要一个关于数学的网站，我想从用户输入数据中交互式地生成多重图。

This answer 可能会有所帮助。

作为记录，链接的问题中列出的一些库确实支持多图，至少现在是这样。

【参考方案1】：

我最近使用 Graphviz 绘制了一些作者出版物之间的联系。 Graphviz 是开源图形可视化软件。 Graphviz 布局程序以简单的文本语言对图形进行描述，并以有用的格式制作图表，例如用于网页的图像和 SVG、PDF 或 Postscript 以包含在其他文档中；或显示在交互式图形浏览器中。

例如，我使用一个简单的 DOT 文件来编写作者之间的所有连接，然后我生成了一个 PNG 文件。

http://www.graphviz.org/

这里有您需要的所有文档，在图库部分您可以看到很多输出示例。

希望对您有所帮助。

【讨论】：

谢谢，但我希望通过网页中的用户输入进行交互生成图表。

【参考方案2】：

最好的办法是使用JGraphT 在服务器上呈现它们（或将其用作小程序）。

【讨论】：

我想要一个“javascipt”库...... JGraphT 是一个 Java 库。

我知道，但没有 JavaScript 库。正如您已经指出的那样，您可能只想使用生成图像的 Wolfram API，这可能是一个可行的解决方案。

我不知道为什么我坚持不使用闪存或小程序......现在我正在研究@Konstantin 的解决方案并自己进行开发。当然，在完成开发后，我会使其完全开源。还是谢谢。

【参考方案3】：

恐怕您必须自己进行一些开发。 Raphael.js 在创建和操作 svg 方面非常有能力——这将是一个很好的起点

【参考方案4】：

如果你被允许使用Google Charts API，你可以参考这个

http://code.google.com/apis/chart/image/docs/gallery/graphviz.html

例子：

https://chart.googleapis.com/chart?cht=gv&chl=graphC_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]

【讨论】：

@parashant-bhate：很好的建议。它也支持多图。如果我可以使它更具交互性，那将是完美的。就像单击节点以删除它们或通过单击它们来移动节点或删除边缘。再次感谢

【参考方案5】：

其中一些图形可视化库（在this 问题中提到）确实支持 Multigraphs 并允许拖动/放置节点

jsplumb：http://jsplumb.org/jquery/stateMachineDemo.html

可能http://js-graph-it.sourceforge.net/可能支持多图。

但就你的问题而言

4- 真的很丑！

这些可能不符合您的审美。

【参考方案6】：

我认为 paper.js (http://paperjs.org) 也会让你非常接近。

【参考方案7】：

你可能想看看这个：www.d3js.org

您必须自己做很多事情（制作自己的 SVG 等），但该库非常强大。

【参考方案8】：

Cytoscape.JS 支持多图，是纯 Javascript，并使用新的 HTML 5 Canvas 来提高性能。它的设计意图是通用图形可视化/操作。

http://cytoscape.github.com/cytoscape.js/

【参考方案9】：

在商业场景下，看看yFiles for HTML：

它很容易支持多图，而且看起来不会太难看，我相信：

^{（这些图是自动布局的，也可以手动布局。）}

当然这是个人喜好问题，所以如果你不喜欢这个外观，你可以改变可视化的任何方面，比如the style tutorial。

API 提供完整的交互式编辑功能，并且是纯客户端解决方案，当然没有 API 调用次数限制。

大图仍然是当今 Javascript 引擎的一个问题，但前提是“大”意味着超过数千个元素。借助虚拟化（仅考虑渲染期间视口中当前可见的内容），您可以获得良好的性能与数千个元素。

免责声明：我在 SO/SE 上为创建库的公司工作，但我不代表我的雇主。我的帖子和 cmets 是我自己的。

【参考方案10】：

你可以查看jsnetworkx (http://jsnetworkx.org/)

它是一个js版本的python图形库，支持多图。它有一个draw 函数，可以使用 D3.js 可视化图形。它适用于浏览器和 node.js。