SHARE
TWEET

Untitled

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