15 didRender: function() { |
15 didRender: function() { |
16 var self = this; |
16 var self = this; |
17 var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1'; |
17 var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1'; |
18 |
18 |
19 d3.json(baseURL + "/discourses", function(discourses) { |
19 d3.json(baseURL + "/discourses", function(discourses) { |
20 console.log(discourses); |
|
21 |
20 |
22 var width = self.$().parent().width(); |
21 var width = self.$().parent().width(); |
23 var height = self.$().parent().height(); |
22 var height = self.$().parent().height(); |
24 |
23 |
25 var bubble = d3.layout.pack() |
24 var bubble = d3.layout.pack() |
26 .sort(null) |
25 .sort(function comparator(a, b) { return a.value + b.value; }) |
27 .size([width, height]) |
26 .size([width, height]) |
28 .padding(33); |
27 .padding(250); |
29 |
28 |
30 var element = d3.select('#' + self.get('elementId')); |
29 var element = d3.select('#' + self.get('elementId')) |
|
30 .style("position", "relative"); |
|
31 |
|
32 var bubbles = bubble.nodes(self.createNodes(discourses)); |
|
33 |
|
34 var caption = element.append("div") |
|
35 .style("position", "absolute") |
|
36 .style("transform-origin", "50% 50% 0px") |
|
37 .style("width", width + "px") |
|
38 .style("height", height + "px") |
|
39 .attr("class", "caption"); |
|
40 |
|
41 var caption_nodes = caption.selectAll(".node") |
|
42 .data(bubbles); |
|
43 |
|
44 caption_nodes.enter().append("div") |
|
45 .attr("class", function(d) { return 'item' + (d.children ? ' category': ''); }) |
|
46 .style("width", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; }) |
|
47 .style("height", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; }) |
|
48 .style("position", function(d) { return 'absolute'; }) |
|
49 .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; }) |
|
50 .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; }); |
|
51 |
|
52 var text = caption.selectAll(".item") |
|
53 .append("span") |
|
54 |
|
55 .text(function(d) { return d.name; }) |
|
56 .style("text-align", "center") |
|
57 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; }) |
|
58 .style("width", function(d) { return $(this).parent().width() > $(this).width() ? $(this).parent().width() + 'px' : ''; }) |
|
59 .style("text-transform", "capitalize") |
|
60 .style("font-size", "15px") |
|
61 .style("margin-left", function(d) { return ( $(this).width() > $(this).parent().width() ? - ( $(this).width() / 2 ) + ( $(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
|
62 .style("margin-top", function(d) { return $(this).parent().height() / 2 - $(this).height() / 2 + 'px'; }); |
31 |
63 |
32 var svg = element.append("svg") |
64 var svg = element.append("svg") |
33 .attr("width", width) |
65 .style("width", width + "px") |
34 .attr("height", height) |
66 .style("height", width + "px") |
35 .attr("class", "bubble"); |
67 .attr("class", "bubble"); |
36 |
68 |
37 svg.selectAll(".node") |
69 var svg_nodes = svg.selectAll(".node") |
38 .data(bubble.nodes(self.createNodes(discourses))) |
70 .data(bubbles); |
39 .enter().append("g") |
71 |
40 .attr("width", function(d) { return 2.5 * d.r + 'px'; }) |
72 svg_nodes.enter().append("g") |
41 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
73 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
42 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) |
74 .attr("transform", function(d) { console.log(d); return "translate(" + d.x + "," + d.y + ")"; }); |
43 .style("font-size", function(d) { return Math.max(13, d.r / 2) + 'px'; }); |
|
44 |
|
45 |
75 |
46 var leaf = svg.selectAll(".leaf") |
76 var leaf = svg.selectAll(".leaf") |
47 .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); |
77 .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); |
48 |
78 |
49 leaf.append("circle") |
79 leaf.append("circle") |
50 .attr("r", function(d) { return d.r; }) |
80 .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); }) |
51 .attr("fill", function(d) { return d.fill; }) |
81 .attr("fill", function(d) { return d.fill; }) |
52 .attr("stroke", function() { return "#000"; }); |
82 .attr("stroke", function() { return "#000"; }); |
53 |
|
54 leaf.append("text") |
|
55 .attr("dy", ".3em") |
|
56 .style("text-anchor", "middle") |
|
57 .text(function(d) { return d.name; }); |
|
58 |
83 |
59 element.style("height", height + "px"); |
84 element.style("height", height + "px"); |
60 }); |
85 }); |
61 |
86 |
62 this._super(...arguments); |
87 this._super(...arguments); |