equal
deleted
inserted
replaced
1 import Ember from 'ember'; |
1 import Ember from 'ember'; |
2 import d3 from 'd3'; |
2 import d3 from 'd3'; |
|
3 import ENV from 'app-client/config/environment'; |
|
4 import _ from 'lodash/lodash'; |
3 |
5 |
4 export default Ember.Component.extend({ |
6 export default Ember.Component.extend({ |
|
7 constants: Ember.inject.service(), |
5 didInsertElement: function(){ |
8 didInsertElement: function(){ |
6 var _this = this; |
9 var _this = this; |
7 var margin = {top: 20, right: 0, bottom: 0, left: 0}, |
10 var margin = {top: 20, right: 0, bottom: 0, left: 0}, |
8 width = Ember.$("#chart_div").width(), |
11 width = Ember.$("#chart_div").width(), |
9 height = 600 - margin.top - margin.bottom, |
12 height = 600 - margin.top - margin.bottom, |
44 grandparent.append("text") |
47 grandparent.append("text") |
45 .attr("x", 6) |
48 .attr("x", 6) |
46 .attr("y", 6 - margin.top) |
49 .attr("y", 6 - margin.top) |
47 .attr("dy", ".75em"); |
50 .attr("dy", ".75em"); |
48 |
51 |
49 d3.json("langues.json", function(root) { |
52 var baseurl = ENV.baseURL.replace(/\/$/,"")+'/api/v1'; |
|
53 d3.json(baseurl+"/languages", function(languages) { |
|
54 |
|
55 var root = _.cloneDeep(_this.constants.LANGUAGES_TREEMAP); |
|
56 |
50 initialize(root); |
57 initialize(root); |
51 accumulate(root); |
58 accumulate(root); |
52 layout(root); |
59 layout(root); |
53 display(root); |
60 display(root); |
54 |
61 |
62 // Aggregate the values for internal nodes. This is normally done by the |
69 // Aggregate the values for internal nodes. This is normally done by the |
63 // treemap layout, but not here because of our custom implementation. |
70 // treemap layout, but not here because of our custom implementation. |
64 // We also take a snapshot of the original children (_children) to avoid |
71 // We also take a snapshot of the original children (_children) to avoid |
65 // the children being overwritten when when layout is computed. |
72 // the children being overwritten when when layout is computed. |
66 function accumulate(d) { |
73 function accumulate(d) { |
67 return (d._children = d.children) ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0) : d.value; |
74 return (d._children = d.children) ? (d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0)) : (d.value = (languages[d.id]?languages[d.id]:0)); |
68 } |
75 } |
69 |
76 |
70 // Compute the treemap layout recursively such that each group of siblings |
77 // Compute the treemap layout recursively such that each group of siblings |
71 // uses the same size (1×1) rather than the dimensions of the parent cell. |
78 // uses the same size (1×1) rather than the dimensions of the parent cell. |
72 // This optimizes the layout for the current zoom state. Note that a wrapper |
79 // This optimizes the layout for the current zoom state. Note that a wrapper |
90 |
97 |
91 function display(d) { |
98 function display(d) { |
92 grandparent |
99 grandparent |
93 .datum(d.parent) |
100 .datum(d.parent) |
94 .on("click", transition) |
101 .on("click", transition) |
95 .select("text") |
102 .select("text") |
96 .text(name(d)); |
103 .text(name(d)); |
97 |
104 |
98 var g1 = svg.insert("g", ".grandparent") |
105 var g1 = svg.insert("g", ".grandparent") |
99 .datum(d) |
106 .datum(d) |
100 .attr("class", "depth"); |
107 .attr("class", "depth"); |
101 |
108 |
102 var g = g1.selectAll("g") |
109 var g = g1.selectAll("g") |
103 .data(d._children) |
110 .data(d._children) |
104 .enter().append("g"); |
111 .enter().append("g"); |
105 |
112 |
106 g.classed("bla", true).on("click", selectHandler); |
113 g.classed("bla", true).on("click", selectHandler); |
107 |
114 |
108 g.filter(function(d) { return d._children; }) |
115 g.filter(function(d) { return d._children; }) |
109 .classed("children", true) |
116 .classed("children", true) |