-
Notifications
You must be signed in to change notification settings - Fork 0
/
mapa.js
73 lines (57 loc) · 2.29 KB
/
mapa.js
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
var margin = 10,
outerDiameter = 960,
innerDiameter = outerDiameter - margin - margin;
var x = d3.scale.linear()
.range([0, innerDiameter]);
var y = d3.scale.linear()
.range([0, innerDiameter]);
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([innerDiameter, innerDiameter])
.value(function(d) { return d.size; })
var svg = d3.select("body").append("svg")
.attr("width", outerDiameter)
.attr("height", outerDiameter)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
d3.json("new.json", function(error, root) {
var focus = root,
nodes = pack.nodes(root);
console.log(focus)
svg.append("g").selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { return zoom(focus == d ? root : d); });
svg.append("g").selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.style("opacity", function(d) { return d.parent === root ? 1 : 0; })
.text(function(d) { return d.name; });
d3.select(window)
.on("click", function() { zoom(root); });
function zoom(d, i) {
focus = d;
var k = innerDiameter / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
d3.event.stopPropagation();
var transition = d3.selectAll("text,circle").transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
transition.filter("circle")
.attr("r", function(d) { return k * d.r; });
transition.filter("text")
.style("opacity", function(d) { return d.parent === focus ? 1 : 0; });
}
});
d3.select(self.frameElement).style("height", outerDiameter + "px");