Download the library and styles. Include it in your html.
<script src="js/node-editor.min.js"></script>
<link href="css/node-editor.css" rel="stylesheet" type="text/css"></link>Create needed sockets
var numSocket = new D3NE.Socket('number', 'Number value', 'hint');
var imageSocket = new D3NE.Socket('image', 'Image', 'hint');Define them styles
.socket.number{
fill: #96b38a
}
.socket.image{
fill: #cc2a6a
}Create some NodeBuilder's
var texturebuilder = new D3NE.NodeBuilder("Texture",function(){
var out = new D3NE.Output("Texture",imageSocket);
return new D3NE.Node("Texture")
.addOutput(out);
});
var shapebuilder = new D3NE.NodeBuilder("Shape",function(){
var input = new D3NE.Input("Texture",imageSocket);
var out = new D3NE.Output("Value",numSocket);
return new D3NE.Node("Shape")
.addInput(input)
.addOutput(out);
});And create NodeEditor
var nodeEditor = new D3NE.NodeEditor('nodeEditor',
[],
[shapebuilder,texturebuilder],
new D3NE.Events());For detail see demo
MIT