View-graph NPM

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

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>