-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
84 lines (77 loc) · 2.66 KB
/
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<script src="./d3.min.js"></script>
<script src="./jsnetworkx.js"></script>
<script type="text/javascript">
var G = new jsnx.Graph();
function drawGraph(G){
jsnx.draw(G, {
element: '#canvas',
width: 500,
height: 500,
nodeAttr: {
r: 20
},
nodeStyle:{
fill: function(d){
return d.data.color || "#FF8C00";
},
stroke: "none"
},
edgeStyle:{
fill: function(d){
return "#888888";
},
stroke: "none"
},
withLabels: true,
stickyDrag: true,
labelStyle: {fill: 'white'},
}, true);
}
function updateGraph(){
var text = document.fm.tarea.value.replace(/\r\n|\r/g,"\n");
var lines = text.split('\n');
// textareaから，辺情報の読み込み
for(var i = 0; i < lines.length; i++){
if( lines[i] == '')continue;
l = lines[i].split(' ').map(function(elem) {return Number(elem);});
G.addEdgesFrom([l]);
console.log(l);
}
// 初期のカラーを設定
G.addNodesFrom(G.nodes(),{color: '#FF8C00'});
drawGraph(G);
loop();
}
// ループ処理 （少しずつ色を変える）
var colorLinear = d3.scale.linear().range(["#000000","#00FF00"]);
var count = 0.01;
function loop(){
G.addNode(1,{color: colorLinear(count)});
count += 0.01;
setTimeout(loop,100);
}
</script>
</head>
<style>
div.canvas {
margin: 10pt;
padding: 20pt;
}
</style>
<body>
<div style="float:left;">
<form name="fm">
<textarea name="tarea" rows="30" cols="30"></textarea></br>
<input type="button" value="更新" onclick="updateGraph()" style="float:right;">
</form>
</div>
<div style="float:left;" id="canvas" height='600pt'></div>
<script type="text/javascript">
</script>
</body>
</html>