DOCSEARCHbyAlgolia
Submit Docs

vis-network

repository·master·Indexed 25 days ago

https://github.com/visjs/vis-network

A dynamic, browser-based visualization library for displaying networks consisting of nodes and edges. It utilizes HTML canvas for smooth rendering of up to a few thousand elements and supports clustering for larger datasets. The library includes features for hierarchical layouts, customizable edge styling (including various endpoint types like arrows, circles, and boxes), and flexible node leveling.

Tokens
5.7K
Snippets
16
Records
33
Agent score
84%

What's inside vis-network

  3. Create a Pull Request for vis-network

    master

    When contributing to the vis-network repository, follow these rules for Pull Requests:

    • Target Branch: All pull-requests must be directed to the develop branch. Pull-requests against the master branch will be closed. (Note: Changes to gh-pages are also acceptable).
    • Scope of Changes: Only commit changes to source files located in the lib folder. Do not commit changes to the builds located in the dist folder.
    • Granularity: Keep changes small and focused on a single topic. Only modify code necessary to achieve your goal.
    • Testing: Test your changes before submission. A simple method is to run and modify the existing examples.
    • Issue Referencing: If your PR fixes or implements an existing issue, reference the issue number in both the PR description and the commit message.
    • New Features: When introducing new features, include documentation and a new example to assist users.
    • Breaking Changes: If you change a public function signature or introduce other breaking changes, explicitly state this in the description. Breaking changes trigger a new major release.
    • Code Style: Adhere strictly to the existing code style of the source. Do not refactor existing code to match personal preference.
    • Review Process: Pull-requests require review by at least two support team members. The first must approve the PR, and the second can merge after verification.

  4. Build vis-network from source

    master

    To build the library from the source code:

    1. Clone the repository.
    2. Install dependencies using npm install.
    3. Run the build command using npm run build.
    $ git clone git://github.com/visjs/vis-network.git
$ cd vis-network
$ npm install
$ npm run build

  5. Define node levels for hierarchical layout

    master

    To use a hierarchical layout, you must ensure consistency in how levels are defined across your nodes:

    1. Automatic Leveling: If no nodes have a predefined level in their options, the engine will automatically determine levels using the sortMethod (e.g., hubsize or directed).
    2. Manual Leveling: If you provide a level property in a node's options, all nodes in the network must have a level defined.

    Note: If some nodes have a level defined and others do not, the engine will throw an error: "To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes."

  6. Create a basic network visualization

    master

    To initialize a network, you need a container element in your HTML, a vis.DataSet containing nodes and edges, and an options object. You then instantiate the network using new vis.Network(container, data, options).

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Network</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
    ></script>
    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body
    >
    <div id="mynetwork"></div
    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {};
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>

  7. Customize edge editing with editEdge option

    master

    When using the editEdge manipulation mode, you can provide a custom function via the options.editEdge configuration key to intercept and modify an existing edge's properties.

    options.editEdge can be configured in two ways:

    1. As an object: Provide an object containing an editWithoutDrag function.
    2. As a function: Provide a function directly.

    In both cases, the function must accept two arguments:

    1. defaultData: An object containing the current edge properties (e.g., id, from, to, label).
    2. callback: A function that receives the finalizedData. The network will update the edge if the finalizedData is not null or undefined.

  8. Configure Hierarchical Layout options

    master

    The hierarchical layout can be enabled and customized via the hierarchical configuration object. When enabled, the layout engine automatically adapts physics and edge settings to suit a hierarchical structure.

    Key options include:

    • enabled: Boolean to turn hierarchical layout on or off.
    • levelSeparation: Distance between levels.
    • nodeSpacing: Distance between nodes on the same level.
    • treeSpacing: Distance between separate trees (sub-networks).
    • blockShifting: Boolean to enable/disable the block-shifting algorithm.
    • edgeMinimization: Boolean to enable/disable edge minimization.
    • parentCentralization: Boolean to enable/disable parent centralization.
    • direction: The orientation of the layout. Options: UD (Up-Down), DU (Down-Up), LR (Left-Right), RL (Right-Left).
    • sortMethod: Method to determine node levels. Options: hubsize, directed, or custom (requires predefined levels).

  9. Configure ViewFitOptions for viewport fitting

    master

    The ViewFitOptions interface defines the configuration for fitting the network view to specific elements and zoom constraints.

    Properties:

    • nodes: An array of IdType (string or number) representing the node IDs that the view should fit to.
    • minZoomLevel: A number representing the minimum allowed zoom level. Must be greater than zero.
    • maxZoomLevel: A number representing the maximum allowed zoom level. Must be greater than or equal to minZoomLevel.

  10. Configure Improved Layout (Kamada Kawai)

    master

    The improvedLayout option enables the Kamada Kawai algorithm for positioning nodes. This is a heavy algorithm that may use clustering to improve performance on large networks.

    • improvedLayout: Boolean to enable/disable the improved layout.
    • clusterThreshold: A threshold used to decide when to cluster nodes before running the Kamada Kawai algorithm. If the number of nodes exceeds this threshold, the engine will attempt to cluster them to reduce computational load.

  11. Customize edge creation with addEdge option

    master

    When using the addEdge manipulation mode, you can provide a custom function via the options.addEdge configuration key to intercept and modify the edge data before it is added to the network.

    Your function must accept two arguments:

    1. defaultData: An object containing the initial edge properties (e.g., from, to).
    2. callback: A function that receives the finalizedData. The network will only add the edge if the finalizedData is not null or undefined.

  12. Customize node creation with addNode option

    master

    When using the addNode manipulation mode, you can provide a custom function via the options.addNode configuration key to intercept and modify the node data before it is added to the network.

    Your function must accept two arguments:

    1. defaultData: An object containing the initial node properties (e.g., id, x, y, label).
    2. callback: A function that receives the finalizedData. The network will only add the node if the finalizedData is not null or undefined.