Skip to content

Instantly share code, notes, and snippets.

@jbilcke
Created April 29, 2017 14:48
Show Gist options
  • Save jbilcke/1664879fc565f8ffd0df649803b2bded to your computer and use it in GitHub Desktop.
Save jbilcke/1664879fc565f8ffd0df649803b2bded to your computer and use it in GitHub Desktop.
Vis.js graph component for Idyll
const React = require('react');
const IdyllComponent = require('idyll-component');
const Graph = require('react-graph-vis').default;
const options = {
layout: {
hierarchical: true
},
edges: {
color: "#000000"
}
};
const events = {
select: function(event) {
const { nodes, edges } = event;
console.log("Selected nodes:", nodes);
console.log("Selected edges:", edges);
}
};
class GraphComponent extends IdyllComponent {
constructor(props) {
super(props)
this.state = {
graph: this.props.data
}
}
render() {
return (
<Graph
graph={this.state.graph}
options={options}
events={events}
/>
);
}
}
module.exports = GraphComponent;
{
"nodes": [
{"id": 1, "label": "Node 1", "color": "#e04141"},
{"id": 2, "label": "Node 2", "color": "#e09c41"},
{"id": 3, "label": "Node 3", "color": "#e0df41"},
{"id": 4, "label": "Node 4", "color": "#7be041"},
{"id": 5, "label": "Node 5", "color": "#41e0c9"}
],
"edges": [
{"from": 1, "to": 2},
{"from": 1, "to": 3},
{"from": 2, "to": 4},
{"from": 2, "to": 5}
]
}
[data name:"graph" source:"graph.json" /]
[Graph data:graph /]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment