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

Question

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

用户将执行的示例步骤：

添加节点

画边

等等..

我不想要 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 }
  ]);
}

这会产生：

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

用户可以绘制新链接，select它们，删除它们，然后重新连接它们。链接可以是自反的；任一方向的任意两个节点之间允许有多个链接。

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

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

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

JavaScript library to Draw Network Graph using Mouse

javascript

jquery

graph

graph-visualization

d3.js