32 var bubbles = bubble.nodes(self.createNodes(discourses)); |
32 var bubbles = bubble.nodes(self.createNodes(discourses)); |
33 |
33 |
34 var caption = element.append("div") |
34 var caption = element.append("div") |
35 .style("position", "absolute") |
35 .style("position", "absolute") |
36 .style("transform-origin", "50% 50% 0px") |
36 .style("transform-origin", "50% 50% 0px") |
37 .style("width", width + "px") |
|
38 .style("height", height + "px") |
|
39 .attr("class", "caption"); |
37 .attr("class", "caption"); |
40 |
38 |
41 var caption_nodes = caption.selectAll(".node") |
39 var caption_nodes = caption.selectAll(".node") |
42 .data(bubbles); |
40 .data(bubbles); |
43 |
41 |
44 caption_nodes.enter().append("div") |
42 caption_nodes.enter().append("div") |
45 .attr("class", function(d) { return 'item' + (d.children ? ' category': ''); }) |
43 .attr("class", function(d) { return d.children ? " category": " item"; }); |
|
44 |
|
45 var item = caption.selectAll(".item") |
46 .style("width", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; }) |
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'; }) |
47 .style("height", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; }) |
48 .style("position", function(d) { return 'absolute'; }) |
48 .style("position", "absolute") |
49 .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; }) |
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'; }); |
50 .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; }) |
51 |
51 .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); |
52 var text = caption.selectAll(".item") |
52 |
53 .append("span") |
53 item.append("span") |
54 |
|
55 .text(function(d) { return d.name; }) |
54 .text(function(d) { return d.name; }) |
56 .style("text-align", "center") |
55 .style("text-align", "center") |
57 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; }) |
56 .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' : ''; }) |
57 .style("width", function() { return $(this).parent().width() > $(this).width() ? $(this).parent().width() + 'px' : ''; }) |
59 .style("text-transform", "capitalize") |
58 .style("text-transform", "capitalize") |
60 .style("font-size", "15px") |
59 .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'; }) |
60 .style("margin-left", function() { 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'; }); |
61 .style("margin-top", function() { return $(this).parent().height() / 2 - $(this).height() / 2 + 'px'; }); |
63 |
62 |
64 var svg = element.append("svg") |
63 var svg = element.append("svg") |
65 .style("width", width + "px") |
64 .style("width", width + "px") |
66 .style("height", width + "px") |
65 .style("height", width + "px") |
67 .attr("class", "bubble"); |
66 .attr("class", "bubble"); |
69 var svg_nodes = svg.selectAll(".node") |
68 var svg_nodes = svg.selectAll(".node") |
70 .data(bubbles); |
69 .data(bubbles); |
71 |
70 |
72 svg_nodes.enter().append("g") |
71 svg_nodes.enter().append("g") |
73 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
72 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
74 .attr("transform", function(d) { console.log(d); return "translate(" + d.x + "," + d.y + ")"; }); |
73 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
75 |
74 |
76 var leaf = svg.selectAll(".leaf") |
75 var leaf = svg.selectAll(".leaf") |
77 .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); |
76 .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); |
78 |
77 |
79 leaf.append("circle") |
78 leaf.append("circle") |