view-graph

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

Property	Attribute	Type	Default	Description
data	-	GraphData	-	Nodes and edges for creating a graph
edgeStyle	-	EdgeStyle	polyline	polyline - straight lines curve - smooth curved lines
nodeStyle	-	NodeStyle | NodeStyle[]	An SVG rectangle	This SVG will be using as nodes image
css	-	String	-	Overwrite the default styles
callback	-	Callback	-	The optional parameter for subscribing and reacting on some events inside the graph
layoutConfig	-	LayoutConfig	{ ranker: 'tight-tree', rankdir: 'LR', ranksep: "the longest label" + 50 }	A layout can be configured by setting the properties in layoutConfig object

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.