使用鼠标绘制网络图的 JavaScript 库

Question

我正在寻找一个简单的 Javascript 库，它可以允许用户使用鼠标绘制网络（树状）图，即允许用户使用鼠标本身使用单向或双向箭头连接标记节点。生成图形数据后（可能是 JSON 格式），我会将数据存储到数据库中，以便稍后渲染图形。

用户将执行的示例步骤：

1. 添加节点

2. 画边

3. 很快..

我不想要 Force-direct 效果。我希望用户在不改变其他节点位置的情况下将节点移动到他想要的位置。

我查看了 d3.js 、 vis.js 等库。但我找不到可以允许用户使用鼠标将节点与边连接的库。事情是这样的，但允许用户使用绘制鼠标和添加节点单向和双向定向的边缘。

有没有这样的 JavaScript / JQuery 库可用？

Answer 1

这是一个在 GoJS 中实现的完整应用程序：

function init() {
var $ = go.GraphObject.make;

myDiagram =
  $(go.Diagram, "myDiagramDiv",
      {
        // double-click in background creates new node
        "clickCreatingTool.archetypeNodeData": {},
        "undoManager.isEnabled": true
      });

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    { locationSpot: go.Spot.Center, locationObjectName: "SHAPE" },
    // remember the location, which is at the center of the circle
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape, "Circle",
      {
        name: "SHAPE", fill: "steelblue", width: 40, height: 40,
        // allow users to draw links to and from this circle
        portId: "", cursor: "pointer",
        fromLinkable: true, toLinkable: true,
        fromLinkableDuplicates: true, toLinkableDuplicates: true,
        fromLinkableSelfNode: true, toLinkableSelfNode: true
      }),
    // show in-place editable text, by default above the circle
    $(go.TextBlock, "abc",
      { alignment: new go.Spot(0.5, 0.5, 0, -30), editable: true },
      // TwoWay Binding automatically remembers text edits
      new go.Binding("text").makeTwoWay())
  );

myDiagram.linkTemplate =
  $(go.Link,
    { relinkableFrom: true, relinkableTo: true },
    $(go.Shape, { stroke: "steelblue", strokeWidth: 1.5 }),
    $(go.Shape, { toArrow: "OpenTriangle", stroke: "steelblue" })
  );

myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", loc: "0 0" },
    { key: 2, text: "Beta", loc: "150 0" },
    { key: 3, text: "Gamma", loc: "-75 150" },
    { key: 4, text: "Delta", loc: "75 150" }
  ],
  [
    { from: 1, to: 2 },
    { from: 1, to: 3 },
    { from: 2, to: 2 },
    { from: 3, to: 4 },
    { from: 4, to: 3 },
    { from: 4, to: 1 }
  ]);
}

这产生：

用户可以通过在后台双击来创建新节点。他们可以移动它们。他们可以通过控制拖放或复制粘贴来复制它们。他们可以通过单击选定节点的文本就地编辑文本。

用户可以绘制新链接、选择它们、删除它们并重新连接它们。链接可以是自反的；在任一方向的任何两个节点之间都允许有多个链接。

完全支持撤消/重做。用户可以将当前图表保存为 JSON 格式，如图表下方的文本区域所示。用户也可以从那里加载它。

更多信息位于https://gojs.net/learn。