SHARE
TWEET

Untitled

a guest Apr 25th, 2019 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4.   <head>
  5.   <style>
  6. .node circle {
  7.  fill: #fff;
  8.  stroke: steelblue;
  9.  stroke-width: 1.5px;
  10. }
  11. .node {
  12.  font: 10px sans-serif;
  13. }
  14. .link {
  15.  fill: none;
  16.  stroke: #ccc;
  17.  stroke-width: 1.5px;
  18. }
  19.  </style>
  20.     <script src="https://d3js.org/d3.v3.min.js"></script>
  21.   </head>
  22.   <body>
  23.   <script>
  24.  
  25.   var width = 500;
  26.   var height = 500;
  27.  
  28.   var cluster = d3.layout.cluster()
  29.  .size([height, width - 160]);
  30. var diagonal = d3.svg.diagonal()
  31.  .projection(function(d) { return [d.y, d.x]; });
  32.  
  33.  
  34.   var data = {
  35.               "name": "flare",
  36.               "children": [{
  37.                 "name": "analytics",
  38.                 "children": [{
  39.                   "name": "cluster",
  40.                   "children": [{
  41.                     "name": "AgglomerativeCluster",
  42.                     "size": 3938
  43.                   }, {
  44.                     "name": "CommunityStructure",
  45.                     "size": 3812
  46.                   }, {
  47.                     "name": "MergeEdge",
  48.                     "size": 743
  49.                   }]
  50.                 }, {
  51.                   "name": "graph",
  52.                   "children": [{
  53.                     "name": "BetweennessCentrality",
  54.                     "size": 3534
  55.                   }, {
  56.                     "name": "LinkDistance",
  57.                     "size": 5731
  58.                   }]
  59.                 }]
  60.               }]
  61.           };
  62.  
  63.  
  64. function draw()
  65. {
  66.   var svg = d3.select("body").append("svg")
  67.  .attr("width", width)
  68.  .attr("height", height)
  69.  .append("g")
  70.  .attr("transform", "translate(40,0)");
  71.  
  72. var nodes = cluster.nodes(data),
  73.  links = cluster.links(nodes);
  74.  
  75.  var link = svg.selectAll(".link")
  76.  .data(links)
  77.  .enter().append("path")
  78.  .attr("class", "link")
  79.  .attr("d", diagonal);
  80.  
  81. var node = svg.selectAll(".node")
  82.  .data(nodes)
  83.  .enter().append("g")
  84.  .attr("class", "node")
  85.  .attr("transform", function(d) { return "translate(" + d.y + "," +d.x + ")"; })
  86.  
  87.  node.append("circle")
  88.  .attr("r", 4.5);
  89.  
  90. node.on("click", function(d){collapse(d);});
  91.  
  92. node.append("text")
  93.  .attr("dx", function(d) { return d.children ? -8 : 8; })
  94.  .attr("dy", 3)
  95.  .style("text-anchor", function(d) { return d.children ? "end" :"start"; })
  96.  .text(function(d) { return d.name; });
  97.  
  98. }
  99.  
  100.   function collapse(d) {
  101.   if (d.children) {
  102.     d._children = d.children;
  103.     d.children = null;
  104.   }
  105.   else {
  106.     d.children = d._children;
  107.     d._children = null;
  108.   }
  109.   d3.select("svg").remove();
  110.   draw(d);
  111. }
  112. draw();
  113.  
  114. </script>
  115.   </body>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top