8 |
8 |
9 classNames: ['discourses-component'], |
9 classNames: ['discourses-component'], |
10 |
10 |
11 constants: Ember.inject.service(), |
11 constants: Ember.inject.service(), |
12 filter: Ember.inject.service(), |
12 filter: Ember.inject.service(), |
|
13 |
|
14 discourseObserver: Ember.observer('filter.discourse', function() { |
|
15 Ember.$('.item').removeClass("selected"); |
|
16 Ember.$('.item[data-id="' + this.get('filter').get('discourse') + '"]').addClass("selected"); |
|
17 }).on('init'), |
13 |
18 |
14 didRender: function() { |
19 didRender: function() { |
15 var self = this; |
20 var self = this; |
16 var baseURL = ENV.rootURL.replace(/\/$/,"")+'/api/v1'; |
21 var baseURL = ENV.rootURL.replace(/\/$/,"")+'/api/v1'; |
17 |
22 |
37 |
42 |
38 var element = d3.select('#' + self.get('elementId')); |
43 var element = d3.select('#' + self.get('elementId')); |
39 |
44 |
40 var bubbles = bubble.nodes(self.createNodes(discourses)); |
45 var bubbles = bubble.nodes(self.createNodes(discourses)); |
41 |
46 |
42 var caption = element.append("div") |
47 var nodes = element |
43 .attr("class", "caption"); |
48 .selectAll() |
44 var caption_nodes = caption.selectAll(".node") |
|
45 .data(bubbles); |
49 .data(bubbles); |
46 |
50 |
47 caption_nodes.enter().append("div") |
51 nodes.enter().append("div") |
48 .attr("class", function(d) { return d.children ? " category": " item"; }); |
52 .attr("class", function(d) { return ( d.children ? "category": "item" ) + ( self.get('filter').get('discourse') === d.id ? " selected" : "" ) ; }); |
49 |
53 |
50 var item = caption.selectAll(".item") |
54 var item = element.selectAll(".item") |
51 .style("width", function(d) { return (d.r * 2) + 'px'; }) |
55 .attr("data-id", function(d) { return d.id; }) |
52 .style("height", function(d) { return (d.r * 2) + 'px'; }) |
56 .style("left", function(d) { return ( d.x - d.r) + "px"; }) |
53 .style("left", function(d) { return d.x - d.r + 'px'; }) |
57 .style("top", function(d) { return ( d.y - d.r) + "px"; }) |
54 .style("top", function(d) { return d.y - d.r + 'px'; }) |
58 .style("width", function(d) { return (d.r * 2) + "px"; }) |
55 .style("font-size", function(d) { |
59 .style("height", function(d) { return (d.r * 2) + "px"; }) |
56 return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px'; |
60 .style("background-color", function(d) { return d.fill; }) |
57 }) |
61 .style("border-color", function(d) { return d.stroke; }) |
58 .on('click', function(d) { |
62 .style("font-size", function(d) { return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px'; }) |
59 self.get('filter').set('discourse', d.id); |
|
60 }); |
|
61 item.append("span") |
|
62 .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; }) |
|
63 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; }) |
|
64 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; }) |
|
65 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
|
66 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; }); |
|
67 |
|
68 var svg = element.append("svg") |
|
69 .style("width", width + "px") |
|
70 .style("height", height + "px") |
|
71 .attr("class", "bubble"); |
|
72 |
|
73 var svg_nodes = svg.selectAll(".node") |
|
74 .data(bubbles); |
|
75 svg_nodes.enter().append("g") |
|
76 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
|
77 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
|
78 |
|
79 var leaf = svg.selectAll(".leaf") |
|
80 .on('click', function(d) { |
63 .on('click', function(d) { |
81 self.get('filter').set('discourse', d.id); |
64 self.get('filter').set('discourse', d.id); |
82 }); |
65 }); |
83 |
66 |
84 leaf.append("circle") |
67 item.append("span") |
85 .attr("r", function(d) { return d.r; }) |
68 .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; }) |
86 .attr("fill", function(d) { return d.fill; }) |
69 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
87 .attr("stroke", function(d) { return d.stroke; }); |
70 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; }); |
88 element.style("height", height + "px"); |
|
89 }); |
71 }); |
90 |
72 |
91 this._super(...arguments); |
73 this._super(...arguments); |
92 }, |
74 }, |
93 |
75 |