jquery html5关系图,html5 canvas复杂人物关系图设置代码

特效描述：html5 canvas 复杂人物关系图。html5关系图代码，可以设置多个人物关系图样式，支持json调用复杂关系图设置。

代码结构

1. 引入JS

2. HTML代码

var graph = new Springy.Graph();

var dennis = graph.newNode({

label: Dennis,

ondoubleclick: function() { console.log("Hello!"); }

});

var michael = graph.newNode({label: Michael});

var jessica = graph.newNode({label: Jessica});

var timothy = graph.newNode({label: Timothy});

var barbara = graph.newNode({label: Barbara});

var franklin = graph.newNode({label: Franklin});

var monty = graph.newNode({label: Monty});

var james = graph.newNode({label: James});

var bianca = graph.newNode({label: Bianca});

graph.newEdge(dennis, michael, {color: #00A0B0});

graph.newEdge(michael, dennis, {color: #6A4A3C});

graph.newEdge(michael, jessica, {color: #CC333F});

graph.newEdge(jessica, barbara, {color: #EB6841});

graph.newEdge(michael, timothy, {color: #EDC951});

graph.newEdge(franklin, monty, {color: #7DBE3C});

graph.newEdge(dennis, monty, {color: #000000});

graph.newEdge(monty, james, {color: #00A0B0});

graph.newEdge(barbara, timothy, {color: #6A4A3C});

graph.newEdge(dennis, bianca, {color: #CC333F});

graph.newEdge(bianca, monty, {color: #EB6841});

jQuery(function(){

var springy = window.springy = jQuery(#springydemo).springy({

graph: graph,

nodeSelected: function(node){

console.log(Node selected: + JSON.stringify(node.data));

}

});

});

特效描述：html5 canvas 复杂人物关系图。html5关系图代码，可以设置多个人物关系图样式，支持json调用复杂关系图设置。 代码结构 1. 引入JS 2. HTML代码 var graph = new Springy.Graph(); var dennis = graph.newNode({ label: Dennis, ondoubleclick: function() { console.log("Hello!"); } }); var michael = graph.newNode({label: Michael}); var jessica = graph.newNode({label: Jessica}); var timothy = graph.newNode({label: Timothy}); var barbara = graph.newNode({label: Barbara}); var franklin = graph.newNode({label: Franklin}); var monty = graph.newNode({label: Monty}); var james = graph.newNode({label: James}); var bianca = graph.newNode({label: Bianca}); graph.newEdge(dennis, michael, {color: #00A0B0}); graph.newEdge(michael, dennis, {color: #6A4A3C}); graph.newEdge(michael, jessica, {color: #CC333F}); graph.newEdge(jessica, barbara, {color: #EB6841}); graph.newEdge(michael, timothy, {color: #EDC951}); graph.newEdge(franklin, monty, {color: #7DBE3C}); graph.newEdge(dennis, monty, {color: #000000}); graph.newEdge(monty, james, {color: #00A0B0}); graph.newEdge(barbara, timothy, {color: #6A4A3C}); graph.newEdge(dennis, bianca, {color: #CC333F}); graph.newEdge(bianca, monty, {color: #EB6841}); jQuery(function(){ var springy = window.springy = jQuery(#springydemo).springy({ graph: graph, nodeSelected: function(node){ console.log(Node selected: + JSON.stringify(node.data)); } }); });