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",
      {
        initialContentAlignment: go.Spot.Center,
        // 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格式保存当前图表，如图下方的textarea所示。用户也可以从那里加载它。

您可以在https://gojs.net/temp/editNetworkGraph.html运行此编辑器。执行浏览器命令查看页面源以查看HTML和JavaScript中的整个实现。

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

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

1 个答案: