Search code examples
javascriptjqueryd3.jsgraphgraph-visualization

JavaScript library to Draw Network Graph using Mouse

I'm looking for a simple Javascript library which can allow users to draw a Network (tree-like) graph using Mouse, i.e. allow user to connect Labelled Nodes using Uni-directional or Bidirectional Arrows using Mouse itself. Once the graph data is generated (in JSON format maybe), I will be storing the data to database, so I can render the graph later.

Example steps that user would perform:

  1. Add nodes

enter image description here

  1. Draw edges

enter image description here

  1. So on..

enter image description here

I don't want the Force-direct effect. I would like the user to move the nodes where he wants without the position of other nodes being changed.

I looked into libraries like d3.js , vis.js etc. But I could not find library which can allow users to connect nodes with edges using mouse. Something like this, but allow users to draw uni and bi directional edges using mouse and add nodes.

Are there any such JavaScript / JQuery libraries available?

Solution

  • Here's a complete app implemented in 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 }
  ]);
}

    This produces: The initial diagram

    The user can create new nodes by double-clicking in the background. They can move them. They can copy them by either control-drag-and-drop or by copy-and-paste. They can edit the text in place by clicking on the text of a selected node.

    The user can draw new links, select them, delete them, and reconnect them. Links can be reflexive; multiple links are allowed between any two nodes in either direction.

    There is full support for undo/redo. The user can save the current diagram in JSON format as shown in the textarea below the diagram. The user can load it from there too.

    More information is at https://gojs.net/learn.