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.