JAVASCRIPT 27
Network.js Guest on 27th April 2021 08:07:12 PM
  1. // some colour variables
  2.   var tcBlack = "#130C0E";
  3.  
  4. // rest of vars
  5. var w = 1130,
  6.     h = 750,
  7.     maxNodeSize = 50,
  8.     x_browser = 20,
  9.     y_browser = 25,
  10.     root;
  11.  
  12. var vis;
  13. var force = d3.layout.force();
  14. var toolTip = d3.select(document.getElementById("toolTip"));
  15. var labels={};
  16. var circles={};
  17. var paths={};
  18.  
  19. vis = d3.select("#vis").append("svg").attr("width", w).attr("height", h);
  20. var header = d3.select(document.getElementById("head"));
  21. var named = d3.select(document.getElementById("named"));
  22.  
  23. d3.json("../network.json", function(json) {
  24.  
  25.   root = json;
  26.   root.fixed = true;
  27.   root.x = w / 2;
  28.   root.y = h / 3;
  29.  
  30.  
  31.         // Build the path
  32.   var defs = vis.insert("svg:defs")
  33.       .data(["end"]);
  34.  
  35.  
  36.   defs.enter().append("svg:path")
  37.       .attr("d", "M0,-5L10,0L0,5");
  38.  
  39.      update();
  40. });
  41.  
  42.  
  43. /**
  44.  *  
  45.  */
  46. function update() {
  47.   var nodes = flatten(root),
  48.       links = d3.layout.tree().links(nodes);
  49.  
  50.   // Restart the force layout.
  51.   force.nodes(nodes)
  52.         .links(links)
  53.         .gravity(0.05)
  54.     .charge(-1500)
  55.     .linkDistance(90)
  56.     .friction(0.5)
  57.     .linkStrength(function(l, i) {return 1; })
  58.     .size([w, h])
  59.     .on("tick", tick)
  60.         .start();
  61.  
  62.    var path = vis.selectAll("path.link")
  63.       .data(links, function(d) { return d.target.id; });
  64.  
  65.     path.enter().insert("svg:path")
  66.       .attr("class", "link")
  67.       .style("stroke", "#02384C")
  68.       .style("opacity", ".8")
  69.       .transition()
  70.       .duration(1500)
  71.       .style("stroke", "#D4D4D4")
  72.       .style("stroke-width", "0.4em")
  73.       .style("opacity", ".4");
  74.  
  75.  
  76.   // Exit any old paths.
  77.   path.exit().remove();
  78.  
  79.  
  80.  
  81.   // Update the nodesā€¦
  82. ¦
  83.   var node = vis.selectAll("g.node")
  84.       .data(nodes, function(d) { return d.id; });
  85.  // Enter any new nodes.
  86. es.
  87.   var nodeEnter = node.enter().append("a")
  88.         .attr("xlink:href", function(d){return d.link;})
  89.         .append("svg:g")
  90.       .attr("class", "node")
  91.       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
  92.       .on("click", click)
  93.       .call(force.drag);// Append a circle
  94. cle
  95.   nodeEnter.append("svg:circle")
  96.         .transition()
  97.       .duration(4500)
  98.       .ease("elastic")
  99.       .attr("r", function(d) { return 40 / d.zoom || 4.5; })
  100.       .attr('stroke-width',')
  101.         .attr('tr('stroke', function(d) { if (typeof d.border != "undefined") { return d.border }else{ return d.color } })
  102.       .style("fill", function(d) { return d.color; });// Append images
  103. ges
  104.   var images = nodeEnter.append("svg:image")
  105.         .attr("xlink:href",  function(d) { return d.img;})
  106.         .attr("x", function(d) { return -25 / d.zoom;})
  107.         .attr("y", function(d) { return -25 / d.zoom;})
  108.         .attr("height", function(d) { return 50 / d.zoom;})
  109.         .attr("width", function(d) { return 50 / d.zoom;});// make the image grow a little on mouse over and add the text details on click
  110. ick
  111.   var setEvents = images
  112.       // Append name text
  113. ext
  114.           .on( 'click', function (d) {
  115.  
  116.            })
  117.  
  118.           .on( 'mouseenter', function(d) {
  119.         // select element in current context
  120. ext
  121.             d3.select( this )
  122.               .transition()
  123.               .duration(200)
  124.               .attr("x", function(d) { return -30 / d.zoom;})
  125.               .attr("y", function(d) { return -30 / d.zoom;})
  126.               .attr("height", function(d) { return 60 / d.zoom;})
  127.               .attr("width", function(d) { return 60 / d.zoom;});
  128.             node_onMouseOver(d);
  129.        //click(d);
  130. d);
  131.           })
  132.       // set back
  133. ack
  134.           .on( 'mouseleave', function(d) {
  135.             d3.select( this )
  136.               .transition()
  137.               .duration(200)
  138.               .attr("x", function(d) { return -25 / d.zoom;})
  139.               .attr("y", function(d) { return -25 / d.zoom;})
  140.               .attr("height", function(d) { return 50 / d.zoom;})
  141.               .attr("width", function(d) { return 50 / d.zoom;});
  142.             node_onMouseOut(d);
  143.           });
  144.  
  145. // Exit any old nodes.
  146. es.
  147.   node.exit().remove();
  148.  
  149. // Re-select for update.
  150. te.
  151.   path = vis.selectAll("path.link");
  152.   node = vis.selectAll("g.node");
  153.  
  154. function tick() {
  155.  
  156.  
  157.     path.attr("d", function(d) {
  158.  
  159.      var dx = d.target.x - d.source.x,
  160.            dy = d.target.y - d.source.y,
  161.            dr = Math.sqrt(dx * dx + dy * dy);
  162.            return   "M" + d.source.x + ","
  163.             + d.source.y
  164.             + "A" + dr + ","
  165.             + dr + " 0 0,1 "
  166.             + d.target.x + ","
  167.             + d.target.y;
  168.   });
  169.     node.attr("transform", nodeTransform);    
  170.   }
  171. }/**
  172.  * Gives the coordinates of the border for keeping the nodes inside a frame
  173.  * http://bl.ocks.org/mbostock/1129492
  174.  */
  175.  */
  176. function nodeTransform(d) {
  177.   d.x =  Math.max(maxNodeSize, Math.min(w - (d.imgwidth/2 || 16), d.x));
  178.     d.y =  Math.max(maxNodeSize, Math.min(h - (d.imgheight/2 || 16), d.y));
  179.     return "translate(" + d.x + "," + d.y + ")";
  180.    /**
  181.  * Toggle children on click.
  182.  */
  183.  */
  184. function click(d) {
  185.   if (d.children) {
  186.     d._children = d.children;
  187.     d.children = null;
  188.   } else {
  189.     d.children = d._children;
  190.     d._children = null;
  191.   }
  192.  
  193.   update();
  194. }
  195. /**
  196.  * Returns a list of all nodes under the root.
  197.  */
  198.  */
  199. function flatten(root) {
  200.   var nodes = [];
  201.   var i = 0;
  202.  
  203.   function recurse(node) {
  204.     if (node.children)
  205.       node.children.forEach(recurse);
  206.     if (!node.id)
  207.       node.id = ++i;
  208.     nodes.push(node);
  209.   }
  210.  
  211.   recurse(root);
  212.   return nodes;
  213. }
  214.  
  215. function node_onMouseOver(d) {
  216.  
  217.     toolTip.transition()
  218.         .duration(800)
  219.         .ease("elastic")
  220.         .style("width", "350px")
  221.         .style("opacity", ".9");
  222.     named.transition()
  223.         .duration(400)
  224.         .style("font-size", "12px");
  225.  
  226.     header.html('<div class="tooltip_icon" style="background-image: url('+d.img+'); background-color:'+d.color+'"></div><div style="border-color:'+d.color+'" class="tooltip_header">'+d.type+'</div>');
  227.     header.transition()
  228.         .duration(600)
  229.         .style("opacity", "1");
  230.     named.html(d.name);
  231.  
  232.     toolTip.style("left", (d3.event.pageX + 40) + "px")
  233.         .style(", (d3.event.pageY - 50) + " + "px");
  234. }
  235.  
  236. function node_onMouseOut(d) {
  237.  
  238.     toolTip.transition()
  239.         .duration(1000)
  240.         .style("width", "10px")
  241.         .style("color", "#FFFFFF")
  242.         .style("opacity", "0");
  243.     named.transition()
  244.         .duration(800)
  245.         .style("font-size", ");
  246.    header.transition()
  247.        .duration(400)
  248.        .style("le("opacity", "0"

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.