antonKalinin / React Json Graph
Licence: mit
React component for rendering graphs
Stars: ✭ 71
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Json Graph
Utils
🛠 Lightweight utilities for string & array manipulation, image handling, safe JSON encoding/decoding, validation, slug or strong password generating etc.
Stars: ✭ 1,158 (+1530.99%)
Mutual labels: json, component
Sparkliner
Sparkliner — easy way to make sparkline graph [Sketch plugin]
Stars: ✭ 184 (+159.15%)
Mutual labels: graph, json
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+256.34%)
Mutual labels: json, component
Aws Security Viz
Visualize your aws security groups.
Stars: ✭ 511 (+619.72%)
Mutual labels: graph, json
Serializer
With the Serializer component it's possible to handle serializing data structures, including object graphs, into array structures or other formats like XML and JSON. It can also handle deserializing XML and JSON back to object graphs.
Stars: ✭ 2,021 (+2746.48%)
Mutual labels: json, component
Protostuff
Java serialization library, proto compiler, code generator
Stars: ✭ 1,730 (+2336.62%)
Mutual labels: graph, json
Object Editor React
Schema-aware editor for structured JSON objects (drop-in React component)
Stars: ✭ 104 (+46.48%)
Mutual labels: json, component
Vue D3 Network
Vue component to graph networks using d3-force
Stars: ✭ 415 (+484.51%)
Mutual labels: graph, component
Native
Generate a form using JSON Schema and Vue.js
Stars: ✭ 382 (+438.03%)
Mutual labels: json, component
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (+164.79%)
Mutual labels: graph, component
Dotnet Assembly Grapher
Reverse engineering and software quality assurance tool for .NET assemblies
Stars: ✭ 21 (-70.42%)
Mutual labels: graph, component
Subdue
The Subdue graph miner discovers highly-compressing patterns in an input graph.
Stars: ✭ 20 (-71.83%)
Mutual labels: graph, json
Daggraph
Dagger dependency graph generator for Android Developers
Stars: ✭ 1,140 (+1505.63%)
Mutual labels: graph, component
Elm Json Tree View
A library for Elm that shows JSON data as an expandable HTML tree
Stars: ✭ 70 (-1.41%)
Mutual labels: json
Jokeapi
A REST API that serves uniformly and well formatted jokes in JSON, XML, YAML or plain text format that also offers a great variety of filtering methods
Stars: ✭ 71 (+0%)
Mutual labels: json
French Press Editor
☕ An offline-first rich text editor component.
Stars: ✭ 69 (-2.82%)
Mutual labels: component
React Component for rendering graphs in JSON Graph Format
Demo
Inspired by:
- https://github.com/jsongraph/json-graph-specification
- https://twitter.com/tjholowaychuk/status/754836588379590656
Installation
npm install --save react-json-graph
Getting Started
import Graph from 'react-json-graph';
<Graph
width={600}
height={400}
json={{
nodes: [{
id: '0',
label: 'Alice',
position: {x: 150, y: 250},
},
{
id: '1',
label: 'Bob',
position: {x: 350, y: 350},
}],
edges: [{
source: '0',
target: '1'
}]
}}
onChange={(newGraphJSON) => {}}
/>
Graph Component Properties
{
/* Required Props */
width: Number, // required, width of the graph
height: Number, // required, height of the graph
json: {
nodes: [
{
id: String,
label: String, // string content of the node
position: {
x: Number,
y: Number,
},
// Optional
size: {
width: Number, // width of the node
height: Number, // height of the node
},
},
],
edges: [
{
source: String, // id of the source node
target: String, // id of the target node
},
],
// Optional
isStatic: Boolean, // if true, can't change nodes position by dragging
isVertical: Boolean, // if true, all edges draw for vertical graph
isDirected: Boolean, // if false, edges will change connection position depending on source and target nodes position relative to each other
},
/* Optional Props */
scale: Number, // default is 1, current scale of graph
minScale: Number, // default is 1, minimum value of scale, for now can not be less then 0.3
maxScale: Number, // default is 1, maximum value of scale, for now can not be greater then 1
onChange: (updatedJSON) => {}, // calls when graph structure or node position has been changed, accepts new graph JSON as only parameter
Node: React.Component, // React.Component inherited from Node that customize node appearence
Edge: React.Component, // React.Component inherited from Edge that customize edge appearence
shouldNodeFitContent: Boolean, // if true, node will try to resize to fit content
}
Custom Nodes and Edges
import {Node, Edge} from 'react-json-graph';
class GitNode extends Node {
renderContainer({content, isDragging}) {
const className = `Node ${isDragging ? 'Node_dragging_yes' : ''}`;
return (
<div className={className}>
<div className='Node__label'>{content}</div>
</div>
);
}
}
class GitEdge extends Edge {
getStyles(source, target) {
if (parseInt(target.id) === 3) {
return {stroke: '#FF5733'};
}
if (parseInt(target.id) > 5) {
if (parseInt(source.id) ===5 && parseInt(target.id) === 9) {
return null;
}
return {stroke: '#000'};
}
}
}
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].