buildGraph.js
4.7 KB
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
var nodes;
var links;
function buildGraph(t) {
var graph = {};
graph.nodes = t.nodes;
graph.links = t.links;
force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([width, height]).charge(-1e3).friction(.5).linkDistance(function (t)
{
return t.value ? t.value : 80
}).on("tick", tick).start();
svg=svg.append("g")
.call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", zoom))
.append("g");
svg.append("rect")
.attr("fill", "white")
.attr("width", width)
.attr("height", height);
links = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
nodes = svg.selectAll(".node").data(graph.nodes).enter().append("g")
.attr("class", function (t) {
return t.fixed ? "node fixed" : "node"
}).attr("name", function (t) {
return t.name ? t.name.split(" ").join("_").toLowerCase() : ""
}).on("mouseover", mouseover).on("mouseout", mouseout).on("click", active)
.append("circle")
.attr("class", function (t) {
return t.fixed ? "" : "drag"
})
.attr("r", function (t) {
return t.r ? t.r : 15
})
.attr("style", function (t) {
return t.color ? "stroke:" + t.color : !1
});
//d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
d3.selectAll(".drag").call(force.drag), svg.selectAll("g.node").call(text);
/* d3.selectAll("circle").attr("transform", function(t) {
return "translate(" + t.x + "," + t.y + ")";
});*/
//d3.selectAll("circle").attr("transform", function(t) {
// return "translate(" + t + ")";
// });
}
function destroyGraph(){
nodes.remove();
links.remove();
svg.remove();
nodes = [];
links = [];
}
function zoom() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function text(t) {
{
var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
e.attr("style", function (t) {
return "color:" + (t.color ? t.color : "#000")
}).append("xhtml:div").html(function (t) {
//return t.fixed ? t.name : null
return t.name;
})
}
}
/*function textS(t) {
t.append("text").attr("dx", 12).attr("dy", ".35em").text(function (t) {
return t.name
})
}*/
function tick() {
// d3.select("svg").attr("style", "transform:translate(8%)");
d3.selectAll("g foreignObject").attr("x", function (t) {
return t.x + (t.r ? 1.1 * t.r : 15)
}).attr("y", function (t) {
return t.y - 35
});
d3.selectAll("#logo text").attr("x", function (t) {
return t.x + .7 * (t.r ? t.r : 15)
}).attr("y", function (t) {
return t.y
});
nodes.attr("cx", function (t) {
return t.x = Math.max(25, Math.min(width - 50, t.x))
}).attr("cy", function (t) {
return t.y = Math.max(8, Math.min(600, t.y))
});
links.attr("x1", function (t) {
return t.source.x
}).attr("y1", function (t) {
return t.source.y
}).attr("x2", function (t) {
return t.target.x
}).attr("y2", function (t) {
return t.target.y
})
}
function mouseover(t) {
d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
return 1 == t.fixed ? 1.4 * t.r : 15
});
//$("#sbiricuda").html($("." + t.name.split(" ").join("_").toLowerCase()).html())
}
function mouseout() {
d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {
return t.r ? t.r : 15
})
}
function active(t) {
t.fixed && openModal(t.name)
}
function openModal(t) {
var e = t.split(" ").join("_").toLowerCase();
$(".modal-content").hide();
$("." + e).fadeIn();
$("#modal").modal()
}
/*
var width = 900;//1250;
var height = 9 * width / 16, svg, link, node, svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
width: "100%",
height: "100%"
}).attr("viewBox", "0 0 " + width + " " + height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");*/