12 filter: Ember.inject.service(), |
12 filter: Ember.inject.service(), |
13 |
13 |
14 didRender: function() { |
14 didRender: function() { |
15 var self = this; |
15 var self = this; |
16 var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1'; |
16 var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1'; |
17 |
17 |
18 d3.json(baseURL + "/discourses", function(discourses) { |
18 d3.json(baseURL + "/discourses", function(discourses) { |
19 |
|
20 var width = self.$().parent().width(); |
19 var width = self.$().parent().width(); |
21 var height = self.$().parent().height() - self.$().siblings().height(); |
20 var height = self.$().parent().height() - self.$().siblings().height(); |
22 |
21 |
23 var bubble = d3.layout.pack() |
22 var bubble = d3.layout.pack() |
24 .sort(function comparator(a, b) { return a.value + b.value; }) |
23 .sort(function comparator(a, b) { return a.value + b.value; }) |
29 |
28 |
30 var bubbles = bubble.nodes(self.createNodes(discourses)); |
29 var bubbles = bubble.nodes(self.createNodes(discourses)); |
31 |
30 |
32 var caption = element.append("div") |
31 var caption = element.append("div") |
33 .attr("class", "caption"); |
32 .attr("class", "caption"); |
34 |
|
35 var caption_nodes = caption.selectAll(".node") |
33 var caption_nodes = caption.selectAll(".node") |
36 .data(bubbles); |
34 .data(bubbles); |
37 |
35 |
38 caption_nodes.enter().append("div") |
36 caption_nodes.enter().append("div") |
39 .attr("class", function(d) { return d.children ? " category": " item"; }); |
37 .attr("class", function(d) { return d.children ? " category": " item"; }); |
44 .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; }) |
42 .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; }) |
45 .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; }) |
43 .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; }) |
46 .on('click', function(d) { |
44 .on('click', function(d) { |
47 self.get('filter').set('discourse', d.id); |
45 self.get('filter').set('discourse', d.id); |
48 }); |
46 }); |
49 |
|
50 item.append("span") |
47 item.append("span") |
51 .text(function(d) { return d.name; }) |
48 .text(function(d) { return d.name; }) |
52 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; }) |
49 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; }) |
53 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; }) |
50 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; }) |
54 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
51 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
59 .style("height", width + "px") |
56 .style("height", width + "px") |
60 .attr("class", "bubble"); |
57 .attr("class", "bubble"); |
61 |
58 |
62 var svg_nodes = svg.selectAll(".node") |
59 var svg_nodes = svg.selectAll(".node") |
63 .data(bubbles); |
60 .data(bubbles); |
64 |
|
65 svg_nodes.enter().append("g") |
61 svg_nodes.enter().append("g") |
66 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
62 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
67 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
63 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
68 |
64 |
69 var leaf = svg.selectAll(".leaf") |
65 var leaf = svg.selectAll(".leaf") |
72 }); |
68 }); |
73 |
69 |
74 leaf.append("circle") |
70 leaf.append("circle") |
75 .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); }) |
71 .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); }) |
76 .attr("fill", function(d) { return d.fill; }) |
72 .attr("fill", function(d) { return d.fill; }) |
77 .attr("stroke", function() { return "#13212d"; }); |
73 .attr("stroke", function() { return "#859097"; }); |
78 |
|
79 element.style("height", height + "px"); |
74 element.style("height", height + "px"); |
80 }); |
75 }); |
81 |
76 |
82 this._super(...arguments); |
77 this._super(...arguments); |
83 }, |
78 }, |