API tools faq
paste
Advertisement
afiffadhlurrahman

Graph_hierarchy_tree

afiffadhlurrahman
May 29th, 2022
985
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.  
  6.     <title>Contoh Tree</title>
  7.  
  8.   <style>
  9.    
  10.     .node {
  11.         cursor: pointer;
  12.     }
  13.  
  14.     .node circle {
  15.       fill: #fff;
  16.       stroke: steelblue;
  17.       stroke-width: 3px;
  18.     }
  19.  
  20.     .node text {
  21.       font: 12px sans-serif;
  22.     }
  23.  
  24.     .link {
  25.       fill: none;
  26.       stroke: #ccc;
  27.       stroke-width: 2px;
  28.     }
  29.    
  30.   .link text {
  31.       font: 12px sans-serif;
  32.     }
  33.  
  34.     </style>
  35.  
  36.   </head>
  37.  
  38. <body>
  39.  
  40. <!-- load the d3.js library -->
  41. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  42. <script src="generate file js/level1_yes.js"></script>
  43. <script>
  44. // console.log(child_top_level)
  45.  
  46. // var level1 = require('generate file js/level1.js');
  47. var treeData = [
  48.   {
  49.         "name": "Riset di Indonesia",
  50.         "parent": "null",
  51.         // "children": child_top_level
  52.         "children": [
  53.         {
  54.             "name": "Kimia",
  55.             "rule1": "yes",
  56.             "parent": "Top Level",
  57.             "children": [
  58.             {
  59.                 "name": "Sel",
  60.                 "parent": "Kimia",
  61.                 "children": [
  62.                   {
  63.                     "name": "Pembuatan Dye Sensitized Solar Cell (DSSC) dengan Sensitizer \
  64.                               Antosianin dari Buah Buni (Antidesma bunius L)",
  65.                     "rule1": "yes",
  66.                     "parent": "subtopic_19",
  67.                     "children": [
  68.                         {
  69.                           "name": "Fabrication of CuInS 2 and Cu (In, Ga) S 2 thin films by a facile \
  70.                                     spray pyrolysis and their photovoltaic and photoelectrochemical properties",
  71.                           "rule1": "simillar 0.9",
  72.                           "parent": "Pembuatan Dye Sensitized Solar Cell (DSSC) dengan Sensitizer \
  73.                               Antosianin dari Buah Buni (Antidesma bunius L)",
  74.                         }
  75.                     ],
  76.                    
  77.                   },
  78.                   {
  79.                     "name": "Synthesis and analysis of chitosan-lithium battery cell in\
  80.                               various charge/discharge currents",
  81.                     "parent": "subtopic_19"
  82.                   },
  83.                   {
  84.                     "name": "Good coupling performance of PyBOP in the solid-phase synthesis \
  85.                               of tetrapeptide, OH-Pro-Leu-Ala-Ileu-NH2",
  86.                     "parent": "subtopic_19"
  87.                   }
  88.                 ]
  89.             },
  90.             {
  91.                 "name": "Ion",
  92.                 "parent": "Kimia"
  93.             },
  94.             {
  95.                 "name": "Zat Sisa",
  96.                 "parent": "Kimia",
  97.                 "children": [
  98.                   {
  99.                     "name": "Fabrication of CuInS 2 and Cu (In, Ga) S 2 thin films by a facile \
  100.                               spray pyrolysis and their photovoltaic and photoelectrochemical properties",
  101.                     "parent": "subtopic_17",
  102.                   }
  103.                 ]
  104.             }
  105.             ]
  106.         },
  107.         {
  108.             "name": "Pendidikan",
  109.             "parent": "Top Level"
  110.         }
  111.         ]
  112.     }
  113. ];
  114.  
  115.  
  116. // ************** Generate the tree diagram  *****************
  117. var margin = {top: 20, right: 120, bottom: 20, left: 120},
  118.     width = 2000 - margin.right - margin.left,
  119.     height = 620 - margin.top - margin.bottom;
  120.    
  121. var i = 0,
  122.     duration = 750,
  123.     root;
  124.  
  125. var tree = d3.layout.tree()
  126.     .size([height, width]);
  127.  
  128. var diagonal = d3.svg.diagonal()
  129.     .projection(function(d) { return [d.y, d.x]; });
  130.  
  131. var svg = d3.select("body").append("svg")
  132.     .attr("width", width + margin.right + margin.left)
  133.     .attr("height", height + margin.top + margin.bottom)
  134.   .append("g")
  135.     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  136.  
  137. root = treeData[0];
  138. root.x0 = height / 2;
  139. root.y0 = 0;
  140.  
  141. update(root);
  142.  
  143.  
  144. d3.select(self.frameElement).style("height", "500px");
  145.  
  146. function update(source) {
  147.   // Compute the new tree layout.
  148.   var nodes = tree.nodes(root).reverse(),
  149.   links = tree.links(nodes);
  150.   console.log(nodes);
  151.   // Normalize for fixed-depth.
  152.   nodes.forEach(function(d) { d.y = d.depth * 180; });
  153.  
  154.   // Update the nodes…
  155.   var node = svg.selectAll("g.node")
  156.   .data(nodes, function(d) { return d.id || (d.id = ++i); });
  157.  
  158.   // Enter any new nodes at the parent's previous position.
  159.   var nodeEnter = node.enter().append("g")
  160.   .attr("class", "node")
  161.   .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
  162.   .on("click", click);
  163.  
  164.   nodeEnter.append("circle")
  165.   .attr("r", 1e-6)
  166.   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
  167.  
  168.   nodeEnter.append("text")
  169.       .attr("x", function(d) { return d.children || d._children ? -13 : 13; })
  170.       .attr("dy", ".35em")
  171.       .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  172.       .text(function(d) { return d.name; })
  173.       .style("fill-opacity", 1e-6);
  174.  
  175.   // Transition nodes to their new position.
  176.   var nodeUpdate = node.transition()
  177.   .duration(duration)
  178.   .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
  179.  
  180.   nodeUpdate.select("circle")
  181.   .attr("r", 10)
  182.   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
  183.  
  184.   nodeUpdate.select("text")
  185.   .style("fill-opacity", 1);
  186.  
  187.   // Transition exiting nodes to the parent's new position.
  188.   var nodeExit = node.exit().transition()
  189.   .duration(duration)
  190.   .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
  191.   .remove();
  192.  
  193.   // nodeExit.select("circle")
  194.     //   .attr("r", 1e-6);
  195.  
  196.   nodeExit.select("text")
  197.   .style("fill-opacity", 1e-6);
  198.  
  199.   // Update the links…
  200.   var link = svg.selectAll("path.link")
  201.   .data(links, function(d) { return d.target.id; });
  202.  
  203.   // Enter any new links at the parent's previous position.
  204.   link.enter().insert("path", "g")
  205.   .attr("class", "link")
  206.   .attr("d", function(d) {
  207.     var o = {x: source.x, y: source.y};
  208.         return diagonal({source: o, target: o});
  209.   });
  210.  
  211.     // console.log(d,"afif");
  212.   // Transition links to their new position.
  213.   link.transition()
  214.   .duration(duration)
  215.   .attr("d", diagonal);
  216.    
  217.    
  218.   link.append("text")
  219.   .attr("font-family", "Arial, Helvetica, sans-serif")
  220.   .attr("fill", "Black")
  221.   .style("font", "normal 12px Arial")
  222.   .attr("transform", function(d) {
  223.     // console.log(d.source.x);
  224.     return "translate(" +
  225.           ((d.source.y + d.target.y)/2) + "," +
  226.           ((d.source.x + d.target.x)/2) + ")";
  227.   })  
  228.   .attr("dx", ".35em")
  229.   .attr("text-anchor", "middle")
  230.   .text(function(d) {
  231.       console.log(d.target.rule1, d.source.rule1);
  232.         return d.target.rule1;
  233.   });
  234.  
  235.   // Transition exiting nodes to the parent's new position.
  236.   link.exit().transition()
  237.       .duration(duration)
  238.       .attr("d", function(d) {
  239.         var o = {x: source.x, y: source.y};
  240.         return diagonal({source: o, target: o});
  241.       })
  242.       .remove();
  243.  
  244.   // Stash the old positions for transition.
  245.   nodes.forEach(function(d) {
  246.     d.x0 = d.x;
  247.     d.y0 = d.y;
  248.   });
  249. }
  250.  
  251. // Toggle children on click.
  252. function click(d) {
  253.   if (d.children) {
  254.     d._children = d.children;
  255.     d.children = null;
  256.   } else {
  257.     d.children = d._children;
  258.     d._children = null;
  259.   }
  260.   update(d);
  261. }
  262.  
  263. </script>
  264.    
  265.   </body>
  266. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!