lamiastella

d3

Jul 29th, 2016
238
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var diameter = 960,
  2.     format = d3.format(",d"),
  3.     color = d3.scale.category20c();
  4.  
  5. var bubble = d3.layout.pack()
  6.     .sort(null)
  7.     .size([diameter, diameter])
  8.     .padding(1.5);
  9.  
  10. var fisheye = d3.fisheye.circular().radius(120);
  11.  
  12. var svg = d3.select("body").append("svg")
  13.     .attr("width", diameter)
  14.     .attr("height", diameter)
  15.     .attr("class", "bubble");
  16.  
  17. //d3.json("flare.json", function (error, root) {
  18. var root = jsonfilegroups;
  19.  
  20. var node = svg.selectAll(".node")
  21.     .data(bubble.nodes(classes(root))
  22.     .filter(function (d) {
  23.     return !d.children;
  24. }))
  25.     .enter().append("g")
  26.     .attr("class", "node")
  27.     .attr("transform", function (d) {
  28.     return "translate(" + d.x + "," + d.y + ")";
  29. });
  30.  
  31. node.append("title")
  32.     .text(function (d) {
  33.     return d.className + ": " + format(d.value);
  34. });
  35.  
  36. node.append("circle")
  37.     .attr("r", function (d) {
  38.     return d.r;
  39. })
  40.     .style("fill", function (d) {
  41.     return color(d.packageName);
  42. });
  43.  
  44. node.append("text")
  45.     .attr("dy", ".3em")
  46.     .style("text-anchor", "middle")
  47.     .text(function (d) {
  48.     return d.className.substring(0, d.r / 3);
  49. });
  50.  
  51. svg.on("mousemove", function () {
  52.     fisheye.focus(d3.mouse(this));
  53.  
  54.     node.each(function (d) {
  55.         d.fisheye = fisheye(d);
  56.     });
  57.    
  58.      node.selectAll("circle")
  59.           .attr("cx", function(d) { return d.fisheye.x - d.x; })
  60.           .attr("cy", function(d) { return d.fisheye.y - d.y; })
  61.           .attr("r", function(d) { return d.fisheye.z * d.r; });
  62.  
  63.       node.selectAll("text")
  64.           .attr("dx", function(d) { return d.fisheye.x - d.x; })
  65.           .attr("dy", function(d) { return d.fisheye.y - d.y; });
  66. });
  67.  
  68. // Returns a flattened hierarchy containing all leaf nodes under the root.
  69. function classes(root) {
  70.     var classes = [];
  71.  
  72.     function recurse(name, node) {
  73.         if (node.children) node.children.forEach(function (child) {
  74.             recurse(node.name, child);
  75.         });
  76.         else classes.push({
  77.             packageName: name,
  78.             className: node.name,
  79.             value: node.size
  80.         });
  81.     }
  82.  
  83.     recurse(null, root);
  84.     return {
  85.         children: classes
  86.     };
  87. }
  88.  
  89. d3.select(self.frameElement).style("height", diameter + "px");
Add Comment
Please, Sign In to add comment