API tools faq
paste
Advertisement
CR7CR7

index

CR7CR7
Jan 7th, 2024
897
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <link rel="stylesheet" href="css/style.css">
  10.     <script src="https://d3js.org/d3.v7.min.js"></script>
  11. </head>
  12.  
  13. <body>
  14.     <script>
  15.         let data = {
  16.             "id": "14",
  17.             "name": "ANONIMOUS 0",
  18.             "locked": "3",
  19.             "author": "1",
  20.             "children": [
  21.                 {
  22.                     "id": "1",
  23.                     "name": "ANONIMOUS 1",
  24.                     "locked": "3",
  25.                     "author": "1",
  26.                     "children": []
  27.                 },
  28.                 {
  29.                     "id": "2",
  30.                     "name": "ANONIMOUS 2",
  31.                     "locked": "3",
  32.                     "author": "1",
  33.                     "children": []
  34.                 },
  35.                 {
  36.                     "id": "3",
  37.                     "name": "ANONIMOUS 3",
  38.                     "locked": "3",
  39.                     "author": "1",
  40.                     "children": []
  41.                 },
  42.                 {
  43.                     "id": "4",
  44.                     "name": "ANONIMOUS 4",
  45.                     "locked": "3",
  46.                     "author": "1",
  47.                     "children": []
  48.                 }
  49.             ]
  50.         };
  51.  
  52.         let translate = d3.zoomIdentity.translate(innerWidth / 2, innerHeight / 2).scale(1);
  53.         let zoom = d3.zoom().scaleExtent([.25, 4]).on("zoom", function ({ transform }) {
  54.             if (svg) {
  55.                 g.attr("transform", transform);
  56.             }
  57.         });
  58.         let duration = 750;
  59.         let diagonal = d3.linkHorizontal()
  60.             .x(d => d.y)
  61.             .y(d => d.x)
  62.             .source(d => ({ x: d.source.x, y: d.source.y + 50 }))
  63.             .target(d => ({ x: d.target.x, y: d.target.y - 50 }));
  64.  
  65.         let svg = d3.select('body')
  66.             .append('svg')
  67.             .attr("width", innerWidth)
  68.             .attr("height", innerHeight);
  69.  
  70.         let g = svg.append('g');
  71.  
  72.         svg.call(zoom);
  73.         svg.call(zoom.transform, translate);
  74.  
  75.         let root = d3.hierarchy(data, function (d) { return d.children; });
  76.         let treeLayout = d3.tree().nodeSize([46, 180]);
  77.  
  78.         root.children.forEach(collapse);
  79.  
  80.         function collapse(d) {
  81.             if (d.children) {
  82.                 d._children = d.children
  83.                 d._children.forEach(collapse)
  84.                 d.children = null
  85.             }
  86.         }
  87.  
  88.         root.x0 = 80;
  89.         root.y0 = innerHeight / 2;
  90.  
  91.         update(root);
  92.  
  93.         function update(source) {
  94.             var treeData = treeLayout(root);
  95.             let nodes = treeData.descendants();
  96.             let links = treeData.links();
  97.  
  98.             nodes.forEach(function (d) {
  99.                 if (d.parent && d.parent.y === 180) {
  100.                     d.y = d.parent.y + 180;
  101.                 } else {
  102.                     d.y = d.depth * 180;
  103.                 }
  104.             });
  105.  
  106.             let node = g.selectAll('g.node')
  107.                 .data(nodes, function (d) { return d.id || (d.id = d.data.id); });
  108.             let link = g.selectAll('path.link')
  109.                 .data(links, function (d) { return d.id; });
  110.  
  111.             let nodeEnter = node.enter().append('g')
  112.                 .attr('class', 'node')
  113.                 .attr("transform", function (d) {
  114.                     return "translate(" + source.y0 + "," + source.x0 + ")";
  115.                 })
  116.                 .style("cursor", "pointer")
  117.                 .on('click', click);
  118.  
  119.             nodeEnter.append("rect")
  120.                 .attr("width", 120)
  121.                 .attr("height", 36)
  122.                 .attr("transform", "translate(-60,-18)")
  123.                 .attr("rx", 18)
  124.                 .attr("ry", 18)
  125.                 .attr("stroke", "darkseagreen")
  126.                 .attr("stroke-width", 2)
  127.                 .style("fill", function (d) {
  128.                     return d._children ? "darkseagreen" : "#fff";
  129.                 });
  130.             nodeEnter.append("text")
  131.                 .attr("dy", ".35em")
  132.                 .style("text-anchor", "middle")
  133.                 .style("cursor", "pointer")
  134.                 .style('fill-opacity', 1e-6)
  135.                 .text(d => d?.data?.name);
  136.  
  137.             var nodeUpdate = nodeEnter.merge(node);
  138.  
  139.             nodeUpdate.transition()
  140.                 .duration(duration)
  141.                 .attr("transform", function (d) {
  142.                     return "translate(" + d.y + "," + d.x + ")";
  143.                 });
  144.             nodeUpdate.select("text").transition()
  145.                 .duration(duration)
  146.                 .style('fill-opacity', 1);
  147.  
  148.             var nodeExit = node.exit().transition()
  149.                 .duration(duration)
  150.                 .attr("transform", function (d) {
  151.                     return "translate(" + source.y + "," + source.x + ")";
  152.                 })
  153.                 .remove();
  154.             nodeExit.select('text')
  155.                 .style('fill-opacity', 1e-6);
  156.  
  157.             nodes.forEach(function (d) {
  158.                 d.x0 = d.x;
  159.                 d.y0 = d.y;
  160.             });
  161.         }
  162.  
  163.         async function click(event, d) {
  164.             if (!d.children && !d._children) {
  165.                 const response = await fetch(`admin-ajax.php?id=${d.id}`);
  166.                 const childrenData = await response.json(); // []
  167.  
  168.                 d.children = childrenData;
  169.                 d.children.forEach(collapse);
  170.                 update(d);
  171.             } else {
  172.                 if (d.children) {
  173.                     d._children = d.children;
  174.                     d.children = null;
  175.                 } else {
  176.                     d.children = d._children;
  177.                     d._children = null;
  178.                 }
  179.                 update(d);
  180.             }
  181.  
  182.             if (svg) {
  183.                 var currentTransform = d3.zoomTransform(svg.node());
  184.  
  185.                 var xOffset = (innerWidth / 2) - d.y * currentTransform.k;
  186.                 var yOffset = (innerHeight / 2) - d.x * currentTransform.k;
  187.  
  188.                 translate = d3.zoomIdentity
  189.                     .translate(xOffset, yOffset)
  190.                     .scale(currentTransform.k);
  191.  
  192.                 svg.transition()
  193.                     .duration(750)
  194.                     .call(
  195.                         zoom.transform,
  196.                         translate
  197.                     );
  198.             }
  199.         }
  200.     </script>
  201. </body>
  202.  
  203. </html>
  204.  
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!