DOCSEARCHbyAlgolia
Submit Docs

VivaGraphJS

repository·master·Indexed 26 days ago

https://github.com/anvaka/vivagraphjs

An extensible JavaScript library for graph visualization (v0.12.0) that supports various rendering engines, including SVG and WebGL, and layout algorithms. It provides tools for creating graphs, managing nodes and links, implementing force-directed layouts, and customizing user interactions such as zooming and dragging.

Tokens
8.2K
Snippets
15
Records
63
Agent score
87%

What's inside vivagraphjs

  1. Render a graph in a specific DOM element

    master

    By default, the renderer instantiates the graph inside document.body. To render the graph within a specific container, pass a configuration object with the container key to Viva.Graph.View.renderer().

    var graph = Viva.Graph.graph();
graph.addLink(1, 2);

// specify where it should be rendered:
var renderer = Viva.Graph.View.renderer(graph, {
  container: document.getElementById('graphDiv')
});
renderer.run();

  2. Disable or customize user interaction in VivaGraph

    master

    When creating a renderer, you can control how VivaGraph handles user input (zooming, node dragging, and background dragging) using the interactive option. By default, all interactions are enabled.

    To disable all interactions entirely, pass false to the interactive option.

    To enable specific features while disabling others, pass a string containing one or more of the following keywords:

    • node: enables dragging individual nodes with the left mouse.
    • drag: enables dragging the entire graph by dragging the background canvas.
    • scroll: enables zooming in/out using the scroll event.

    Note: If you provide a string with specific keywords, any feature not mentioned in the string will be disabled.

    // Disable all interactions
Viva.Graph.View.renderer(graph, {
  interactive: false
});

// Enable only node dragging (disables scroll and background drag)
Viva.Graph.View.renderer(graph, {
  interactive: 'node'
});

// Enable node dragging and background dragging (disables scroll)
Viva.Graph.View.renderer(graph, {
  interactive: 'node drag'
});

// Enable only scroll-zoom
Viva.Graph.View.renderer(graph, {
  interactive: 'scroll'
});

// Enable all interactions explicitly
Viva.Graph.View.renderer(graph, {
  interactive: 'scroll drag node'
});

  3. Create a new graph

    master

    To start using VivaGraph.JS, initialize a new graph instance using Viva.Graph.graph(). This creates an empty graph with no nodes or edges.

    <!DOCTYPE html>
<html
    <head>
        <title>VivaGraphs test page</title>
        <script src="../dist/vivagraph.js"></script>
        <script type='text/javascript'>
            
            function onLoad() {
                var g = Viva.Graph.graph();
            }
            
        </script>
    </head>
    <body onload="onLoad()">
        
    </body>
</html>

  7. Migrate Node Position and UI from v0.4.x to v0.5.x

    master

    In v0.5.x, position and ui attributes were moved out of node/link objects and into the layout and graphics providers respectively. This allows the same graph to be rendered by multiple different renderers or layouters simultaneously.

    Node Position Migration:

    • Instead of node.position, use layout.getNodePosition(node.id).
    • To set initial positions, use layout.setNodePosition(node, x, y).

    Node/Link UI Migration:

    • Instead of node.ui or link.ui, use graphics.getNodeUI(node.id) or graphics.getLinkUI(link.id).
    // v0.5.x Node Position
graph.forEachNode(function (node) {
  var position = layout.getNodePosition(node.id);
  position.x += 1;
});

// v0.5.x Node UI
graph.forEachNode(function (node) {
  console.dir(graphics.getNodeUI(node.id));
});

// v0.5.x Link UI
graph.forEachLink(function (link) {
  console.dir(graphics.getLinkUI(link.id));
});

  8. Implement rectangular selection with WebGL renderer

    master

    To implement a rectangular selection tool with the WebGL renderer, follow these steps:

    1. Setup HTML Overlay: Create a div overlay that matches the exact size and position of your graph container. This overlay will capture mouse events for the selection tool.
    2. Track Mouse Actions: Use VivaGraph methods to track drag-and-drop actions on the overlay.
    3. Coordinate Conversion: Convert client/screen coordinates from the mouse events into graph coordinates.
    4. Node Selection: Iterate over all nodes in the graph, retrieve their coordinates from the layout, and check if they fall within the bounding rectangle defined by the drag action. If a node's coordinates are within the rectangle, highlight it.

  9. Implement a 'mostly fixed' graph layout

    master
    To create a graph where existing nodes remain stationary while new nodes are allowed to move freely during layout, you can fix the positions of the initial nodes. This is useful for scenarios where you have a stable core of data and want to visualize incoming dynamic nodes flying into position.

  10. Remove a graph from the DOM using dispose()

    master

    To completely remove a VivaGraph instance and its associated elements from the DOM, call the .dispose() method on your renderer instance. This is useful for cleaning up resources when a graph is no longer needed in the application.

    // renderer is created as Viva.Graph.View.renderer()
// if you no longer need it just call:
renderer.dispose();

  11. Tune the force-directed layout algorithm

    master

    If the default layout is not ideal, you can provide a custom layout to the renderer. For a force-directed layout, use Viva.Graph.Layout.forceDirected(graph, options).

    Common tuning parameters include:

    • springLength: The ideal length of the springs.
    • springCoeff: The strength of the spring force.
    • dragCoeff: The damping/drag coefficient.
    • gravity: The gravitational pull.

    You can also tune these values dynamically during simulation using layout.simulator.springLength(newValue), etc.

    var graphGenerator = Viva.Graph.generator();
var graph = graphGenerator.grid(3, 3);

var layout = Viva.Graph.Layout.forceDirected(graph, {
    springLength : 10,
    springCoeff : 0.0005,
    dragCoeff : 0.02,
    gravity : -1.2
});

var renderer = Viva.Graph.View.renderer(graph, {
    layout : layout
});
renderer.run();