使用鼠标绘制网络图的 JavaScript 库 [关闭]

Question

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

用户将执行的示例步骤：

1. 添加节点

1. 画边

1. 等等..

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

我查看了 d3.js 、 vis.js 等库。但我找不到可以让用户使用鼠标将节点与边缘连接起来的库。 like this 的东西，但允许用户使用鼠标绘制单向和双向边缘并添加节点。

有没有这样的 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。