-
Notifications
You must be signed in to change notification settings - Fork 0
/
treemap.js
81 lines (65 loc) · 2.68 KB
/
treemap.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
74
75
76
77
78
79
80
81
function formUpdated(element) {
collectionId = element.collectionId.value;
field = element.field.value;
targetId = element.targetId.value;
excludeZeros = element.excludeZeros.checked;
showNoOccurences = element.showNoOccurences.checked;
updateData(collectionId, field, targetId, excludeZeros, showNoOccurences);
return false;
}
function updateData(collectionId, field, targetId) {
updateData(collectionId, field, targetId, false, false);
}
function updateData(collectionId, field, targetId, excludeZeros, showNoOccurences) {
$('#tree-form input[name=field]').val(field);
excludeZeros = (typeof excludeZeros !== 'undefined') ? excludeZeros : false;
showNoOccurences = (typeof showNoOccurences !== 'undefined') ? showNoOccurences : false;
var url = 'plainjson2tree.php?collectionId=' + collectionId
+ '&field=' + field
+ '&excludeZeros=' + (excludeZeros ? 1 : 0)
+ '&showNoOccurences=' + (showNoOccurences ? 1 : 0);
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 960, // - margin.left - margin.right,
height = 500; // - margin.top - margin.bottom;
var color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.size; });
d3.select(targetId).selectAll("*").remove();
var div = d3.select(targetId)
.style("position", "relative")
// .style("width", width + "px")
// .style("height", height + "px")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
d3.json(url, function(error, root) {
if (error) throw error;
var node = d3.select(targetId).datum(root).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.call(position)
.style("background", function(d) { return d.children ? color(d.name) : null; })
.text(function(d) { return d.children ? null : d.name; });
d3.selectAll("input").on("change", function change() {
var value = this.value === "count"
? function() { return 1; }
: function(d) { return d.size; };
node
.data(treemap.value(value).nodes)
.transition()
.duration(1500)
.call(position);
});
});
return false;
}
function position() {
this.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}