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.
npm install view-graph lit-html --save
Or use a content delivery network:
<script src="https://unpkg.com/view-graph"></script>
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 |
|
A layout can be configured by setting the properties in layoutConfig object |
It uses dagre under the hood for lay out directed graphs.
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 |
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>
view-graph is licensed under the terms of the MIT License. See LICENSE for details.