使用javascript的多图

Question

首先看一下this问题。

这些图书馆都不支持Multigraphs（或Pseudographs）。我的意思是我无法生成这样的图表：

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

我以为我可以使用WolframAlpha's API并使用其图片，例如this：

但它有很多问题：

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

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

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

4. 真的太丑了！

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

顺便说一句，我不想​​再使用Adobe Flash而不是javascript。（任何其他解决方案对我来说都是可以接受的）

提前致谢。

Answer 1

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

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

Answer 2

如果您被允许使用Google Charts API，您可以参考此

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

示例：

  

https://chart.googleapis.com/chart?cht=gv&chl=graph{C_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]}

Answer 3

我担心你自己必须做一些开发。 Raphael.js非常有能力创建和操纵svg - 这将是一个很好的起点

Answer 4

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

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

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

但就你的问题而言

  

4-真的太丑了！

这些可能不会吸引您的审美观念。

Answer 5

您可能想要检查一下：www.d3js.org

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

Answer 6

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

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

http://www.graphviz.org/

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

希望它有所帮助。

Answer 7

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

Answer 8

我认为paper.js（http://paperjs.org）会让你非常接近。

Answer 9

在商业场景中，请查看yFiles for HTML：

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

^{（这些图表已自动布局，也可以手动放置。）}

当然这是一个品味问题，所以如果您不喜欢这种外观，您可以更改可视化的任何方面，例如在the style tutorial中。

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

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

免责声明：我在SO / SE上为创建图书馆的公司工作，但我并不代表我的雇主。我的帖子和评论都是我自己的。

Answer 10

您可以查看jsnetworkx（http://jsnetworkx.org/）

它是一个支持多图的python图库的js版本。它有一个draw函数，可以使用D3.js显示图形。它适用于browser和node.js。

Answer 11

以下是vis.js（信息：edges，nodes，physics）中多图的示例实现

var len = undefined;
    var red = {color:'red'};
    var black = {color:'black'};
    var blue = {color:'blue'};
    var gray = {background: '#c0c0c0', border: '#000',
    highlight:{background:'red',border:'black', color:blue}};

    var nodes = new vis.DataSet([
        {id: 1, color:gray}, // you can add: label: "Hi"
        {id: 2, color:gray},
        {id: 3, color:gray},
        {id: 4, color:gray},
        {id: 5, color:gray},
        {id: 6, color:gray}, 
    ]);
    var edges = [
      {from: 1, to: 5, color: red},
      {from: 1, to: 6, color: red},
      {from: 1, to: 6, color: red},
      {from: 1, to: 6, color: red},
      {from: 1, to: 2, color: black},
      
      {from: 2, to: 6, color: black},
      {from: 2, to: 2, color: blue},
      {from: 2, to: 3, color: black},
            
      {from: 3, to: 6, color: red},
      {from: 3, to: 6, color: red},
      {from: 3, to: 3, color: blue},
      {from: 3, to: 4, color: black},
      
      {from: 4, to: 4, color: blue},
      {from: 4, to: 5, color: black},
      {from: 4, to: 6, color: red},
      {from: 4, to: 6, color: red},
      
      {from: 5, to: 1, color: red},
      {from: 5, to: 6, color: black},
    ]

    // create a network
    var container = mynetwork;
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'dot',
            size: 12,
            font: {
                size: 22,
                color: '#000000'
            },
            borderWidth: 1.5
        },
        edges: {
            width: 3,
            selfReferenceSize:40,
            length:80,
            color : {
              highlight: "green"
            }
        }
    };
    network = new vis.Network(container, data, options);

#mynetwork {
  width: 100%;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

<div id="mynetwork"></div>