"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();