Advertisement
Guest User

Untitled

a guest
Jan 30th, 2017
165
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.55 KB | None | 0 0
  1.     <!DOCTYPE html>
  2.     <meta charset="utf-8">
  3.     <style>
  4.    
  5.        
  6.     .node {
  7.       cursor: pointer;
  8.     }
  9.    
  10.     .node:hover {
  11.       stroke: #000;
  12.       stroke-width: 1.5px;
  13.     }
  14.    
  15.     .node--leaf {
  16.       fill: white;
  17.     }
  18.    
  19.     .label {
  20.       font: 0px "Helvetica Neue", Helvetica, Arial, sans-serif;
  21.       text-anchor: middle;
  22.       text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
  23.     }
  24.    
  25.     .label,
  26.     .node--root,
  27.     .node--leaf {
  28.       pointer-events: none;
  29.     }
  30.    
  31.     </style>
  32.     <!-- <body> -->
  33.     <p>Twitter</p>
  34.     <svg width="960" height="960"></svg>
  35.     <script src="https://d3js.org/d3.v4.min.js"></script>
  36.     <script>
  37.    
  38.     var svg2 = d3.select("svg"),
  39.         margin = 20,
  40.         diameter = +svg2.attr("width"),
  41.         g = svg2.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
  42.    
  43.     var color = d3.scaleLinear()
  44.         .domain([-1, 5])
  45.         .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
  46.         .interpolate(d3.interpolateHcl);
  47.    
  48.     var pack = d3.pack()
  49.         .size([diameter - margin, diameter - margin])
  50.         .padding(2);
  51.    
  52.     d3.json("data1.json", function(error, root) {
  53.       if (error) throw error;
  54.    
  55.       root = d3.hierarchy(root)
  56.           .sum(function(d) { return d.size; })
  57.           .sort(function(a, b) { return b.value - a.value; });
  58.    
  59.       var focus = root,
  60.           nodes = pack(root).descendants(),
  61.           view;
  62.    
  63.       var circle = g.selectAll("circle")
  64.         .data(nodes)
  65.         .enter().append("circle")
  66.           .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
  67.           .style("fill", function(d) { return d.children ? color(d.depth) : null; })
  68.           .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
  69.    
  70.       var text = g.selectAll("text")
  71.         .data(nodes)
  72.         .enter().append("text")
  73.           .attr("class", "label")
  74.           .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
  75.           .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
  76.           .text(function(d) { return d.data.name; });
  77.    
  78.       var node = g.selectAll("circle,text");
  79.    
  80.       svg2
  81.           .style("background", color(-1))
  82.           .on("click", function() { zoom(root); });
  83.    
  84.       zoomTo([root.x, root.y, root.r * 2 + margin]);
  85.    
  86.       function zoom(d) {
  87.         var focus0 = focus; focus = d;
  88.    
  89.         var transition = d3.transition()
  90.             .duration(d3.event.altKey ? 7500 : 750)
  91.             .tween("zoom", function(d) {
  92.               var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
  93.               return function(t) { zoomTo(i(t)); };
  94.             });
  95.    
  96.         transition.selectAll("text")
  97.           .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
  98.             .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
  99.             .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
  100.             .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
  101.       }
  102.    
  103.       function zoomTo(v) {
  104.         var k = diameter / v[2]; view = v;
  105.         node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
  106.         circle.attr("r", function(d) { return d.r * k; });
  107.       }
  108.     });
  109.    
  110.     </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement