Template:Hong Kong HKUST/script.js/JS

"use strict"; var __assign = (this && this.__assign) || Object.assign || function (t) {

   for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
           t[p] = s[p];
   }
   return t;

}; var Const; (function (Const) {

   var kLinkDistanceF = 0.05;
   var kNodeRadiusF = 0.013;
   var Params = (function () {
       function Params(_a) {
           var width = _a[0], height = _a[1];
           this.nodeTransDuration = 250;
           this.radiusExpand = 1.8;
           var min = width < height ? width : height;
           this.nodeRadius = kNodeRadiusF * min;
           this.linkDistance = kLinkDistanceF * min;
       }
       return Params;
   }());
   Const.Params = Params;
   var ordinal = d3.scaleOrdinal(d3.schemeCategory20);
   function Color(n) {
       switch (n) {
           case 0:
               return '#000';
           case 1:
               return '#a1c8f2';
           case 2:
               return '#08f7a4';
           case 3:
               return '#eb9ce9';
           case 4:
               return '#82d9e9';
           case 5:
               return '#d3bdbb';
           case 6:
               return '#bc998b';
           case 7:
               return '#19a1a2';
           case 8:
               return '#7bc52f';
           case 9:
               return '#8921e3';
           case 10:
               return '#88460b';
           case 11:
               return '#6281f0';
           case 12:
               return '#4b1b8e';
           case 13:
               return '#a20656';
           case 14:
               return '#d74847';
           case 15:
               return '#c581b2';
           case 16:
               return '#f96e32';
           case 17:
               return '#2302de';
           case 18:
               return '#601829';
           case 19:
               return '#fb7172';
           case 20:
               return '#9461fb';
           case 21:
               return '#224db3';
           case 22:
               return '#dd4008';
           case 23:
               return '#ffbae4';
           case 24:
               return '#fffd82';
           case 25:
               return '#e62cd6';
           case 26:
               return '#fcff56';
           case 27:
               return '#859694';
           case 28:
               return '#04c4fa';
           case 29:
               return '#776421';
           case 30:
               return '#7f808c';
           case 31:
               return '#ffc0bc';
           default:
               return '#000'
       }
   }
   Const.Color = Color;
   function radius(n) { return n == 0 ? 3 : 1.5 }
   Const.radiusExpand = radius;

})(Const || (Const = {})); function InitForceSimulation(_a) {

   var cx = _a[0], cy = _a[1];
   return d3.forceSimulation()
       .force("link", d3.forceLink().id(function (d) { return String(d.id); }))
       .force("charge", d3.forceManyBody())
       .force("center", d3.forceCenter(cx, cy));

} function InputJsonToGraph(j) {

   var nodes = Array();
   var links = j.links;
   for (var i = 0; i < j.nodes.length; ++i) {
       nodes.push(__assign({}, j.nodes[i], { id: i }));
   }
   return { links: links, nodes: nodes };

} function ElementAjacencyArray(n, links) {

   var graph = Array();
   for (var i = 0; i < n; ++i) {
       graph.push(Array());
   }
   links.each(function (d) {
       graph[d.source].push(this);
       graph[d.target].push(this);
   });
   return graph;

} function DeleteLinksFromTopics(nodes) {

   nodes.filter(function (d) { return d.group === 0; }).each(function (d) {
       var p = this.parentNode;
       var pp = p.parentNode;
       pp.replaceChild(this, p);
   });

} function EnableSVGTooltip() {

   $("circle").tooltip({
       animation: false,
       container: "body",
       placement: "top",
       trigger: "hover",
   });

} var GraphVisualization = (function () {

   function GraphVisualization(svg) {
       this.svg = d3.select(svg);
       this.simulation = InitForceSimulation([this.SVGWidth() / 2, this.SVGHeight() / 2]);
       this.params = new Const.Params([this.SVGWidth(), this.SVGHeight()]);
   }
   GraphVisualization.prototype.RequestAndDraw = function () {
       var _this = this;
       var url = this.svg.attr("config");
       d3.json(url, function (error, json) {
           if (error) {
               throw error;
           }
           _this.DrawForceGraph(InputJsonToGraph(json));
       });
   };
   GraphVisualization.prototype.DrawForceGraph = function (graph) {
       var links = this.GetLinkSelection(graph.links);
       var nodes = this.GetNodeSelection(graph.nodes);
       this.NodeHoverEffect(nodes, ElementAjacencyArray(nodes.size(), links));
       this.SetSimulationNodes(graph.nodes);
       this.SetSimulationLinks(graph.links);
       this.ConnectModelAndView(nodes, links);
       EnableSVGTooltip();
   };
   GraphVisualization.prototype.GetLinkSelection = function (links) {
       var linkSelection = this.svg.append("g").attr("class", "links")
           .selectAll("line").data(links).enter()
           .append("line").attr("stroke-width", function (d) { return Math.sqrt(d.value); });
       return linkSelection;
   };
   GraphVisualization.prototype.GetNodeSelection = function (nodes) {
       var circleNode = this.svg.append("g").attr("class", "nodes")
           .selectAll("a").data(nodes).enter()
           .append("a").attr("href", function (d) { return d.url; }).attr("target", "_blank")
           .append("circle")
           .attr("r", this.params.nodeRadius)
           .attr("fill", function (d) { return Const.Color(d.group); })
           .attr("data-toggle", "tooltip")
           .attr("title", function (d) { return d.name; });
       this.InitNodeDrag(circleNode);
       DeleteLinksFromTopics(circleNode);
       return circleNode;
   };
   GraphVisualization.prototype.NodeHoverEffect = function (nodes, aa) {
       var params = this.params;
       var nodeHoverRadius = params.nodeRadius * params.radiusExpand;
       nodes.on("mouseover", function (d) {
           d3.select(this)
               .transition()
               .duration(params.nodeTransDuration)
               .attr("r", nodeHoverRadius);
           d3.selectAll(aa[d.id])
               .transition()
               .duration(params.nodeTransDuration)
               .style("stroke", "#757677")
               .style("stroke-width", "2px");
       }).on("mouseout", function (d) {
           d3.select(this)
               .transition()
               .duration(params.nodeTransDuration)
               .attr("r", params.nodeRadius);
           d3.selectAll(aa[d.id])
               .transition()
               .duration(params.nodeTransDuration)
               .style("stroke", "#cecece")
               .style("stroke-width", "1.3px");
       });
   };
   GraphVisualization.prototype.InitNodeDrag = function (node) {
       var _this = this;
       node.call(d3.drag()
           .on("start", function (d) {
               if (!d3.event.active) {
                   _this.simulation.alphaTarget(0.3).restart();
               }
               d.fx = d.x;
               d.fy = d.y;
           })
           .on("drag", function (d) {
               d.fx = d3.event.x;
               d.fy = d3.event.y;
           })
           .on("end", function (d) {
               if (!d3.event.active) {
                   _this.simulation.alphaTarget(0);
               }
               d.fx = null;
               d.fy = null;
           }));
   };
   GraphVisualization.prototype.SetSimulationNodes = function (nodes) {
       this.simulation.nodes(nodes);
   };
   GraphVisualization.prototype.SetSimulationLinks = function (links) {
       var _this = this;
       var linkForce = this.simulation.force("link");
       if (linkForce === undefined) {
           console.error("get force simulation fail");
           return;
       }
       linkForce.links(links).distance(function (l) { return _this.params.linkDistance / l.value; });
   };
   GraphVisualization.prototype.ConnectModelAndView = function (nodes, links) {
       this.simulation.on("tick", function () {
           links
               .attr("x1", function (d) { return d.source.x; })
               .attr("y1", function (d) { return d.source.y; })
               .attr("x2", function (d) { return d.target.x; })
               .attr("y2", function (d) { return d.target.y; });
           nodes
               .attr("cx", function (d) { return d.x; })
               .attr("cy", function (d) { return d.y; });
       });
   };
   GraphVisualization.prototype.SVGWidth = function () {
       return Number(this.svg.attr("width"));
   };
   GraphVisualization.prototype.SVGHeight = function () {
       return Number(this.svg.attr("height"));
   };
   return GraphVisualization;

}()); function CaptureSVGElemAndDraw() {

   new GraphVisualization($("svg.graph")[0]).RequestAndDraw();

} CaptureSVGElemAndDraw();