Advertisement
Guest User

Untitled

a guest
Oct 27th, 2016
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.56 KB | None | 0 0
  1. d3.json("flare.json", function(error, root) {
  2. if (error) throw error;
  3.  
  4. var g = svg.selectAll("g")
  5. .data(partition.nodes(root))
  6. .enter().append("g");
  7.  
  8. path = g.append("path")
  9. .attr("d", arc)
  10. .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
  11. .on("click", magnify)
  12. // .on('mouseover', tip.show)
  13. // .on('mouseout', tip.hide)
  14. .each(stash);
  15.  
  16. var text = g.append("text")
  17. .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
  18. .attr("x", function(d) { return y(d.y); })
  19. .attr("dx", "6") // margin
  20. .attr("dy", ".35em") // vertical-align
  21. .text(function(d) {
  22. return d.name;
  23. })
  24. .attr('font-size', function(d) {
  25. if (d.value < 100000) {
  26. return '10px'
  27. } else {
  28. return '20px';
  29. }
  30. })
  31. .on("click", magnify);
  32.  
  33. var innerG = d3.selectAll("g.inner");
  34.  
  35.  
  36.  
  37. // Distort the specified node to 80% of its parent.
  38. function magnify(node) {
  39. text.transition().attr("opacity", 0);
  40. spin(node);
  41.  
  42. if (parent = node.parent) {
  43. var parent,
  44. x = parent.x,
  45. k = 0.8;
  46. console.log(x)
  47. parent.children.forEach(function(sibling) {
  48. x += reposition(sibling, x, sibling === node
  49. ? parent.dx * k / node.value
  50. : parent.dx * (1 - k) / (parent.value - node.value));
  51. });
  52. } else {
  53. reposition(node, 0, node.dx / node.value);
  54. }
  55.  
  56. path.transition()
  57. .duration(750)
  58. .attrTween("d", arcTween)
  59. .each("end", function(e, i) {
  60. // check if the animated element's data e lies within the visible angle span given in node
  61. if (e.x >= node.x && e.x < (node.x + node.dx)) {
  62. // get a selection of the associated text element
  63. var arcText = d3.select(this.parentNode).select("text");
  64. // fade in the text element and recalculate positions
  65. arcText.transition().duration(750)
  66. .attr("opacity", 1)
  67. .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
  68. .attr("x", function(d) {
  69. return y(d.y);
  70. });
  71. }
  72. });
  73.  
  74. }
  75.  
  76. function spin(d) {
  77. var newAngle = - (d.x + d.dx / 2);
  78.  
  79. innerG
  80. .transition()
  81. .duration(1500)
  82. .attr("transform", "rotate(" + ((180 / Math.PI * newAngle) - 90) + ")");
  83.  
  84. path
  85. .classed("selected", function (x) { return d.name == x.name; });
  86. }
  87.  
  88. // Recursively reposition the node at position x with scale k.
  89. function reposition(node, x, k) {
  90. // console.log(node)
  91. node.x = x;
  92. if (node.children && (n = node.children.length)) {
  93. var i = -1, n;
  94. while (++i < n) x += reposition(node.children[i], x, k);
  95. }
  96. return node.dx = node.value * k;
  97. }
  98.  
  99. // Stash the old values for transition.
  100. function stash(d) {
  101. d.x0 = d.x;
  102. d.dx0 = d.dx;
  103. }
  104.  
  105. // Interpolate the arcs in data space.
  106. function arcTween(a) {
  107. var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
  108. return function(t) {
  109. var b = i(t);
  110. a.x0 = b.x;
  111. a.dx0 = b.dx;
  112. return arc(b);
  113. };
  114. };
  115. });
  116.  
  117. var x = d3.scale.linear()
  118. .range([0, 2 * Math.PI]);
  119.  
  120. var y = d3.scale.linear()
  121. .range([0, radius]);
  122.  
  123. var arc = d3.svg.arc()
  124. .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
  125. .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
  126. .innerRadius(function(d) { return Math.max(0, y(d.y)) })
  127. .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)) })
  128. .cornerRadius(function(d) { return 5;});
  129.  
  130. function spin(d) {
  131. var newAngle = - (d.x + d.dx / 2);
  132. console.log('newAngle', newAngle)
  133.  
  134. innerG
  135. .transition()
  136. .duration(1500)
  137. .attr("transform", "rotate(" + ((180 / Math.PI * newAngle) - 90) + ")");
  138.  
  139.  
  140. path
  141. .classed("selected", function (x) { return d.name == x.name; });
  142. }
  143.  
  144. function spin(d) {
  145.  
  146. var spin1 = new Promise (function(resolve, reject) {
  147. var newAngle = - x(d.x + d.dx / 2);
  148. console.log('newAngle', newAngle)
  149.  
  150. innerG
  151. .transition()
  152. .duration(1500)
  153. .attr("transform", "rotate(" + ((180 / Math.PI * newAngle)) + ")");
  154. resolve("Success!");
  155. });
  156.  
  157. spin1.then(function() {
  158. var newerAngle = - x(d.x + d.dx / 2);
  159. console.log('newerAngle', newerAngle)
  160.  
  161. innerG
  162. .transition()
  163. .duration(1500)
  164. .attr("transform", "rotate(" + ((180 / Math.PI * newerAngle)) + ")");
  165. })
  166.  
  167. path
  168. .classed("selected", function (x) { return d.name == x.name; });
  169. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement