view-graph

This project allows automatically render graphs for visualization and analysis. Enjoy exploring graphs directly in the web browser.

The view-graph takes descriptions of graphs in a simple JSON format, and makes diagrams in automatic mode.

• Installation
• Usage
• Options
• API

Installation

npm install view-graph lit-html --save

Or use a content delivery network:

unpkg.com CDN:

<script src="https://unpkg.com/view-graph"></script>

Usage

Without bundling

Demo

With ReactJS

Demo

Options

It uses dagre under the hood for lay out directed graphs.

API

ViewGraphElementType shows methods that can be used for interact with the main element: | Name | Description | Interface | |---------------|--------------------------------------|-----------------------------------------------------------| | toggleTooltip | Can be used for showing or hiding nodes' tooltips| (isVisible: boolean, nodeKey: string) => void |

Callbacks:

| Name | Description | Interface | | ------------- | ------------------------------------ | --------------------------------------------------------- | | onClickByNode | Invokes by click on a Node | (nodeId: string) => ((event: MouseEvent) => void) | void | | onClickByEdge | Invokes by click on an Edge | (edgeId: string) => ((event: MouseEvent) => void) | void | | onEnterEdge | Invokes when a cursor enters an Edge | (edgeId: string) => ((event: MouseEvent) => void) | void | | onLeaveEdge | Invokes when a cursor leaves an Edge | (edgeId: string) => ((event: MouseEvent) => void) | void | | onEnterNode | Invokes when a cursor enters an Node | (nodeId: string) => ((event: MouseEvent) => void) | void | | onLeaveNode | Invokes when a cursor leaves an Node | (nodeId: string) => ((event: MouseEvent) => void) | void |

Set the callback property to add a reaction by click on a node or an edge.

For example, you can change styles by click:

  const onClickByNode = (event: MouseEvent) => {
    const target = event.target as SVGElement;

    if (target instanceof SVGTextElement) {
      target.style.fill = 'red';
      target.style.fontWeight = 'bold';
    }

    const id = target.parentElement!.id;

    const nodes = graphData.nodes.map((n) => ({
      ...n,
      styleId: n.id === id ? 'selectedNode' : undefined,
    }));

    data = {
      ...data,
      nodes,
    };

    this.next();
  };

  const onClickByEdge = (event: MouseEvent) => {
    const target = event.target as SVGElement;
    const parent = target.parentElement!;

    parent.childNodes.forEach((it) => {
      if (it instanceof SVGElement) {
        it.style.stroke = 'red';
      }
    });
  };

...

<ViewGraphElement
  data={data}
  callback={{ onClickByNode, onClickByEdge }}
></ViewGraphElement>

License

view-graph is licensed under the terms of the MIT License. See LICENSE for details.