ab77b03a
lucvic
Added datasetexpl...
|
1
2
3
4
|
/**
* Created by Utente on 17/07/2015.
*/
|
7d89b743
lucvic
Spinner + Word wrap
|
5
|
function build(root, place_holder, select_listener) {
|
ab77b03a
lucvic
Added datasetexpl...
|
6
7
8
9
10
|
var plwidth = $("#" + place_holder).width(),
plheight = $("#" + place_holder).height();
var margin = {top: 20, right: 0, bottom: 0, left: 0},
|
ab77b03a
lucvic
Added datasetexpl...
|
11
12
13
14
15
16
17
|
width = plwidth,
height = plheight - margin.top - margin.bottom,
formatNumber = d3.format(",d"),
transitioning;
var x = d3.scale.linear()
.domain([0, width])
|
7d89b743
lucvic
Spinner + Word wrap
|
18
|
.domain([0, width])
|
ab77b03a
lucvic
Added datasetexpl...
|
19
20
21
22
23
24
25
26
27
28
29
30
|
.range([0, width]);
var y = d3.scale.linear()
.domain([0, height])
.range([0, height]);
var treemap = d3.layout.treemap()
.children(function(d, depth) { return depth ? null : d._children; })
.sort(function(a, b) { return a.value - b.value; })
.ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
.round(false);
|
7d89b743
lucvic
Spinner + Word wrap
|
31
32
33
34
|
d3.select("#" + place_holder).selectAll('*').remove();
var svg = d3.select("#" + place_holder)
.append("svg")
|
ab77b03a
lucvic
Added datasetexpl...
|
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
|
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.style("margin-left", -margin.left + "px")
.style("margin.right", -margin.right + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.style("shape-rendering", "crispEdges");
var grandparent = svg.append("g")
.attr("class", "grandparent");
var dataletContainer = null;
grandparent.append("rect")
.attr("y", -margin.top)
.attr("width", width)
.attr("height", margin.top);
grandparent.append("text")
.attr("x", 6)
.attr("y", 6 - margin.top)
.attr("dy", ".75em");
//d3.json
initialize(root);
accumulate(root);
layout(root);
display(root);
|
ab77b03a
lucvic
Added datasetexpl...
|
64
65
66
67
68
69
70
71
72
73
74
75
76
|
function initialize(root) {
root.x = root.y = 0;
root.dx = width;
root.dy = height;
root.depth = 0;
}
// Aggregate the values for internal nodes. This is normally done by the
// treemap layout, but not here because of our custom implementation.
// We also take a snapshot of the original children (_children) to avoid
// the children being overwritten when when layout is computed.
function accumulate(d) {
return (d._children = d.children)
|
4f261647
lucvic
Updated datasetex...
|
77
|
? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 5)
|
ab77b03a
lucvic
Added datasetexpl...
|
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
: d.value;
}
// Compute the treemap layout recursively such that each group of siblings
// uses the same size (1×1) rather than the dimensions of the parent cell.
// This optimizes the layout for the current zoom state. Note that a wrapper
// object is created for the parent node for each group of siblings so that
// the parent’s dimensions are not discarded as we recurse. Since each group
// of sibling was laid out in 1×1, we must rescale to fit using absolute
// coordinates. This lets us use a viewport to zoom.
function layout(d) {
if (d._children) {
treemap.nodes({_children: d._children});
var i = 0;
d._children.forEach(function(c) {
c.x = d.x + c.x * d.dx;
c.y = d.y + c.y * d.dy;
c.dx *= d.dx;
c.dy *= d.dy;
c.parent = d;
c.depth = d.depth + 1;
c.color = c.depth < 2
|
4f261647
lucvic
Updated datasetex...
|
100
|
? d3.scale.ordinal().domain(d3.range(d._children.length)).range(["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"])(i++)
|
276d756a
lucvic
Fixed: Dataset pr...
|
101
|
: d.color;
|
ab77b03a
lucvic
Added datasetexpl...
|
102
103
104
105
106
|
layout(c);
});
}
}
|
7d89b743
lucvic
Spinner + Word wrap
|
107
|
function display(d) {
|
ab77b03a
lucvic
Added datasetexpl...
|
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
|
grandparent
.datum(d.parent)
.on("click", transition)
.select("text")
.text(name(d));
var g1 = svg.insert("g", ".grandparent")
.datum(d)
.attr("class", "depth");
var g = g1.selectAll("g")
.data(d._children)
.enter().append("g");
g.filter(function(d) { return d._children; })
.classed("children", true)
.on("click", transition);
g.selectAll(".child")
.data(function(d) { return d._children || [d]; })
.enter().append("rect")
.attr("class", "child")
.call(rect);
g.append("rect")
.attr("class", "parent")
.call(rect)
.append("title")
|
4f261647
lucvic
Updated datasetex...
|
136
|
.text(function(d) { return d.name; /*formatNumber(d.value);*/ });
|
ab77b03a
lucvic
Added datasetexpl...
|
137
138
139
|
g.append("text")
.attr("dy", ".75em")
|
7d89b743
lucvic
Spinner + Word wrap
|
140
|
.call(text);
|
ab77b03a
lucvic
Added datasetexpl...
|
141
142
143
144
145
146
|
function transition(d) {
if (transitioning || !d) return;
transitioning = true;
if (dataletContainer) {
|
ab77b03a
lucvic
Added datasetexpl...
|
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
dataletContainer.remove();
dataletContainer = null;
}
var g2 = display(d),
t1 = g1.transition().duration(750),
t2 = g2.transition().duration(750);
// Update the domain only after entering new elements.
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
// Enable anti-aliasing during the transition.
svg.style("shape-rendering", null);
// Draw child nodes on top of parent nodes.
|
7d89b743
lucvic
Spinner + Word wrap
|
163
|
svg.selectAll(".depth").sort(function(a, b) { return b.depth - a.depth; });
|
ab77b03a
lucvic
Added datasetexpl...
|
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
// Fade-in entering text.
g2.selectAll("text").style("fill-opacity", 0);
// Transition to the new view.
t1.selectAll("text").call(text).style("fill-opacity", 0);
t2.selectAll("text").call(text).style("fill-opacity", 1);
t1.selectAll("rect").call(rect);
t2.selectAll("rect").call(rect);
// Remove the old node when the transition is finished.
t1.remove().each("end", function() {
svg.style("shape-rendering", "crispEdges");
transitioning = false;
});
}
if (!d._children[0]._children) {
|
7d89b743
lucvic
Spinner + Word wrap
|
182
183
184
185
186
|
//grandparent.dispatchEvent(new CustomEvent('select', { detail: d._children[0].name }));
if (select_listener) {
select_listener(d._children[0].name);
}
|
ab77b03a
lucvic
Added datasetexpl...
|
187
188
|
var dataurl = d._children[0].name;
var pageurl = dataurl.replace(/\/download\/.*/, '');
|
ab77b03a
lucvic
Added datasetexpl...
|
189
190
|
dataletContainer = svg
.append("foreignObject")
|
276d756a
lucvic
Fixed: Dataset pr...
|
191
192
|
.attr("width", root.dx)
.attr("height", root.dy - root.y)
|
a31f0660
root
sevc-controllet i...
|
193
194
|
.append("xhtml:body")
.html('<iframe src="'+pageurl+'" width="'+root.dx+'" height="'+root.dy+'"></iframe>');
|
ab77b03a
lucvic
Added datasetexpl...
|
195
196
197
198
199
|
}
return g;
}
|
ab77b03a
lucvic
Added datasetexpl...
|
200
|
function text(text) {
|
7d89b743
lucvic
Spinner + Word wrap
|
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
|
text
.attr("x", function(d) { return x(d.x) + 6; })
.attr("y", function(d) { return y(d.y) + 6; });
text.call(wrap);
}
function wrap(d) {
var wwidth = width;
var hheight = height;
d.each(function(){
var text = d3.select(this),
d = text[0][0].__data__,
words = d.name.trim().split(/\s+|\./).reverse(),
word = words.pop(),
line = [word],
lineNumber = 0,
lineHeight = 1.1, // ems
x = parseFloat(text.attr("x")),
y = parseFloat(text.attr("y")),
dy = parseFloat(text.attr("dy"));
text.selectAll("tspan").remove();
var fx = d3.scale.linear()
.domain([d.parent.x, d.parent.x + d.parent.dx])
.range([0, wwidth]);
var fy = d3.scale.linear()
.domain([d.parent.y, d.parent.y + d.parent.dy])
.range([0, hheight]);
var tspan = text
.text(null)
.append("tspan")
.attr("x", fx(d.x) + 6)
.attr("y", fy(d.y) + 6)
.attr("dy", lineNumber++ * lineHeight + dy + "em");
var width = fx(d.x + d.dx) - fx(d.x) - 12;
var height = fy(d.y + d.dy) - fy(d.y) - 6;
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text
.append("tspan")
.attr("x", fx(d.x) + 6)
.attr("y", fy(d.y) + 6)
.attr("dy", lineNumber++ * lineHeight + dy + "em")
.text(word);
if (text.node().offsetHeight > height) {
tspan.remove();
break;
}
}
}
});
|
ab77b03a
lucvic
Added datasetexpl...
|
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
|
}
function rect(rect) {
rect.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
.attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
.style("fill", function(d, i) { return d.color; })
;
}
function name(d) {
return d.parent
? name(d.parent) + "." + d.name
: d.name;
}
};
|