@daoyi/nmtl-ui 2.0.1-beta.44 → 2.0.1-beta.46

package/lib/components/SNA.js

@@ -1 +1,1735 @@
-import t,{useMemo as e,useEffect as n}from"react";import r from"prop-types";import{e as a,s as o,c as i,o as c,g as l,h as s,l as d,m as f,i as p,j as u,x as h,y as g,r as m,k as y,z as x,n as w,p as N}from"./vendor-851c6356.js";import{E as v}from"./ExtraTools-f10a66a8.js";import{Tooltip as k,IconButton as b}from"@material-ui/core";import"react-is";import"@material-ui/styles";import"react-dom";import"./_rollupPluginBabelHelpers-fde6d1c6.js";import"./Tooltip-b7eb966d.js";import"./dataExport-f418e6fe.js";const A=e=>{let{renderSNA:n}=e;return t.createElement("div",{id:"resetBtn"},t.createElement(k,{title:"回到原來位置與大小"},t.createElement(b,{onClick:()=>n()},t.createElement(a,null))))};A.propTypes={renderSNA:r.func.isRequired};o(".SNA {\n  overflow: hidden;\n  object-fit: contain;\n  position: relative;\n  font-size: 0.75rem;\n  width: 100%; }\n  .SNA--smallSize .node {\n    padding-top: 8px;\n    font-size: 0.75rem;\n    width: 3rem;\n    height: 3rem;\n    overflow: hidden;\n    white-space: pre-wrap;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical; }\n  .SNA .node {\n    background-color: #4a4e69;\n    border-radius: 50%;\n    color: #fff;\n    font-size: 20px;\n    font-weight: 500;\n    height: 54px;\n    width: 54px;\n    padding-top: 15px;\n    position: absolute;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: grab; }\n  .SNA .links line {\n    stroke: #c7bfb4;\n    stroke-width: 2; }\n  .SNA .mainNode {\n    fill: #4e3a16; }\n  .SNA .person {\n    fill: #867b3a; }\n  .SNA .publication {\n    fill: #825c0d; }\n  .SNA .article {\n    fill: #afafaf; }\n  .SNA .keyword {\n    fill: #fcfae8; }\n  .SNA .org {\n    fill: #000000; }\n  .SNA #resetBtn {\n    float: right; }\n  .SNA #network-graph svg {\n    width: 100%;\n    height: 100%; }\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px; }\n    .SNA .node {\n      background-color: #4a4e69;\n      border-radius: 50%;\n      color: #fff;\n      font-size: 1px;\n      font-weight: 500;\n      height: 44px;\n      width: 44px;\n      padding-top: 12px;\n      position: absolute;\n      text-align: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: grab; } }\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px; } }\n");var S=function(r){var a,o=r.className,k=r.intl,b=r.exclude,S=r.distance,E=r.SNAData,C=r.handleClickNodeGoto,M=r.DownloadExcel,j=r.width,z=r.height,D=r.fontColor,T=r.backgroundColor,F=r.iconColor;if(!E||0===E.nodes.length)return t.createElement("div",{className:"noData"},k?k.formatMessage({id:"common.noData"}):"暫無資料");var O=e((function(){return screen.width>1050?j:screen.width-80}),[screen.width]),B=e((function(){return screen.width>1050?z:screen.height-300}),[screen.width]),q=function(t,e,n){var r=function(t,e,n){var r=.5*(e.x+t.x),a=.5*(e.y+t.y),o=e.x-t.x,i=e.y-t.y,c=Math.pow(Math.pow(o,2)+Math.pow(i,2),.5);return{qx:r-i*n/c,qy:a+o*n/c}}(t,e,n),a=r.qx,o=r.qy;return isNaN(a)?"M".concat(t.x,", ").concat(t.y," Q0 0 ").concat(e.x," ").concat(e.y):"M".concat(t.x,", ").concat(t.y," Q").concat(a," ").concat(o," ").concat(e.x," ").concat(e.y)},I=function(t){var e=8.5,n="-0 -".concat(e," ").concat(17," ").concat(17),r="M 0,-".concat(6.800000000000001," L ").concat(13.600000000000001," ,0 L 0,").concat(6.800000000000001),o=c(l),i=t.links.map((function(t){return Object.create(t)})),v=t.nodes.map((function(t){return Object.create(t)})),b=s(v).force("link",d(i).id((function(t){return t.index})).distance(50)).force("charge",f().strength(-200).distanceMax(1e3)).force("center",p(O/2,B/2)).force("collide",u().radius((function(){return 13.5})).strength(1).iterations(10)).force("x",h(O/2)).force("y",g(B/2)).force("radial",m(100,O/1.5,B/1.5)),A=y("#sna-graph").append("svg").attr("viewBox",[0,0,O,B]).style("background-color",T);A.append("defs").append("marker").attr("id","arrowhead").attr("viewBox",n).attr("refX",23.8).attr("refY",0).attr("orient","auto").attr("markerWidth",15.3).attr("markerHeight",15.3).attr("xoverflow","visible").append("svg:path").attr("d",r).attr("fill","#999").style("stroke","none"),a=A.append("g");x().scaleExtent([.5,20]).extent([[0,0],[O,B]]).on("zoom",(function(){a.attr("transform",N.transform)}))(A);var S=a.append("g").attr("stroke","#999").attr("stroke-opacity",.6).selectAll("line").data(i).join("path").attr("fill","none").attr("stroke-dasharray",(function(t){return"protege"===t.ontology?"2,5,3":""})).attr("key",(function(t){return t.type})),E=a.append("g").attr("stroke","#fff").attr("stroke-width",1.5).selectAll("circle").data(v).join("circle").attr("r",(function(t){return"mainNode"===t.type?13.5:e})).attr("fill",(function(t){return o(t.type)})).attr("key",(function(t){return t.type})).attr("class",(function(t){return"node node-".concat(t.id," ").concat(t.type&&"organization"===t.type?"org":"person"===t.type?"person":"publication"===t.type?"publication":"mainNode"===t.type?"mainNode":"article"===t.type?"article":"keyword"===t.type?"keyword":"event"===t.type?"event":"")})).on("click",(function(t){return t.hasClick?C({name:t.name,id:t.id,type:t.type}):null})).call(function(t){return w().on("start",(function(e){N.active||t.alphaTarget(.3).restart(),e.fx=e.x,e.fy=e.y})).on("drag",(function(t){t.fx=N.x>O-10||N.x<20?t.x:N.x,t.fy=N.y>B-10||N.y<20?t.y:N.y}))}(b));E.append("title").text((function(t){return"".concat(t.name,"-").concat(function(t){switch(t){case"mainNode":return k?k.formatMessage({id:"SNA.search.center"}):"主要搜尋中心";case"organization":return k?k.formatMessage({id:"SNA.organization"}):"組織";case"person":return k?k.formatMessage({id:"SNA.author"}):"作家";case"publication":return k?k.formatMessage({id:"SNA.publication"}):"作家";case"article":return k?k.formatMessage({id:"SNA.article"}):"單篇作品";case"keyword":return k?k.formatMessage({id:"SNA.keyword"}):"關鍵字";case"event":return k?k.formatMessage({id:"SNA.event"}):"事件";default:return""}}(t.type))}));var M=a.append("g").selectAll("text").data(v).join("text").attr("fill",D).attr("text-anchor","middle").attr("key",(function(t){return t.type})).style("color","#fff").style("font-size","14px").text((function(t){return t.name})),j=a.selectAll(".edgepath").data(i).enter().append("path").attr("class","edgepath").attr("fill-opacity",0).attr("stroke-opacity",0).attr("id",(function(t,e){return"edgepath".concat(e)})).style("pointer-events","none");a.selectAll(".edgelabel").data(i).enter().append("text").style("pointer-events","none").attr("class","edgelabel").attr("font-size","10px").attr("fill","#aaa").attr("visibility","visible").attr("key",(function(t){return t.type})).attr("id",(function(t,e){return"edgelabel".concat(e)})).append("textPath").attr("xlink:href",(function(t,e){return"#edgepath".concat(e)})).style("text-anchor","middle").style("pointer-events","none").attr("startOffset","50%").text((function(t){return t.property})),b.on("tick",(function(){v.forEach((function(t){t.x>=O-20&&(t.x=O-20),t.y>=B-20&&(t.y=B-20),t.x<=20&&(t.x=20),t.y<=20&&(t.y=20)})),S.attr("d",(function(t){return q(t.source,t.target,30)})),E.attr("cx",(function(t){return t.x})).attr("cy",(function(t){return t.y})),M.attr("x",(function(t){return t.x})).attr("y",(function(t){return t.y-e})),j.attr("d",(function(t){return q(t.source,t.target,30)}))}))},G=function(){if(E&&E.nodes&&E.nodes.length>0){var t=document.getElementById("sna-graph");t&&t.childNodes[0]&&t.removeChild(t.childNodes[0]),I(E)}};return n((function(){G()}),[E]),t.createElement("div",{className:i("SNA",{"SNA--smallSize":S<200},o),style:{contentWidth:O,contentHeight:B,backgroundColor:T}},t.createElement(v,{intl:k,data:E,iconColor:F,domToImageId:"sna-graph",FontSizeTargets:["#sna-graph svg g text"],exclude:b,DownloadExcel:M,fullscreenDomId:"sna-graph"}),t.createElement(A,{renderSNA:G}),t.createElement("div",{id:"sna-graph"}))};S.defaultProps={className:void 0,intl:void 0,width:1050,height:600,distance:400,SNAData:null,fontColor:"#000000",backgroundColor:"#FFFFFF",iconColor:"#825c0d",exclude:["downloadXls","downloadTsv"],handleClickNodeGoto:null,DownloadExcel:void 0},S.propTypes={className:r.string,intl:r.objectOf(r.any),width:r.number,height:r.number,distance:r.number,SNAData:r.objectOf(r.any),fontColor:r.string,backgroundColor:r.string,iconColor:r.string,exclude:r.arrayOf(r.string),handleClickNodeGoto:r.func,DownloadExcel:r.oneOfType([r.node,r.func])};export{S as default};
+import React__default, { useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-f491ebce.js';
+import { e as event, d as d3Select, a as dispatch, c as customEvent, D as DragEvent, q as quadtree, m as map, t as timer, T as Transform, i as identity, b as interrupt, o as ordinal, f as category10 } from './transform-3a04288b.js';
+import { E as ExtraTools } from './ExtraTools-55dad795.js';
+import { Tooltip, IconButton } from '@material-ui/core';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-48da8b6e.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import './_rollupPluginBabelHelpers-fde6d1c6.js';
+import './_commonjsHelpers-70de2c37.js';
+import './Tooltip-907eaa2e.js';
+import './dataExport-d55d6fa3.js';
+import './defaultTheme-19a14721.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+function sourceEvent() {
+  var current = event, source;
+  while (source = current.sourceEvent) current = source;
+  return current;
+}
+
+function point(node, event) {
+  var svg = node.ownerSVGElement || node;
+
+  if (svg.createSVGPoint) {
+    var point = svg.createSVGPoint();
+    point.x = event.clientX, point.y = event.clientY;
+    point = point.matrixTransform(node.getScreenCTM().inverse());
+    return [point.x, point.y];
+  }
+
+  var rect = node.getBoundingClientRect();
+  return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+}
+
+function mouse(node) {
+  var event = sourceEvent();
+  if (event.changedTouches) event = event.changedTouches[0];
+  return point(node, event);
+}
+
+function touch(node, touches, identifier) {
+  if (arguments.length < 3) identifier = touches, touches = sourceEvent().changedTouches;
+
+  for (var i = 0, n = touches ? touches.length : 0, touch; i < n; ++i) {
+    if ((touch = touches[i]).identifier === identifier) {
+      return point(node, touch);
+    }
+  }
+
+  return null;
+}
+
+function nopropagation$1() {
+  event.stopImmediatePropagation();
+}
+
+function noevent$1() {
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+
+function dragDisable(view) {
+  var root = view.document.documentElement,
+      selection = d3Select(view).on("dragstart.drag", noevent$1, true);
+  if ("onselectstart" in root) {
+    selection.on("selectstart.drag", noevent$1, true);
+  } else {
+    root.__noselect = root.style.MozUserSelect;
+    root.style.MozUserSelect = "none";
+  }
+}
+
+function yesdrag(view, noclick) {
+  var root = view.document.documentElement,
+      selection = d3Select(view).on("dragstart.drag", null);
+  if (noclick) {
+    selection.on("click.drag", noevent$1, true);
+    setTimeout(function() { selection.on("click.drag", null); }, 0);
+  }
+  if ("onselectstart" in root) {
+    selection.on("selectstart.drag", null);
+  } else {
+    root.style.MozUserSelect = root.__noselect;
+    delete root.__noselect;
+  }
+}
+
+function constant$2(x) {
+  return function() {
+    return x;
+  };
+}
+
+// Ignore right-click, since that should open the context menu.
+function defaultFilter$1() {
+  return !event.ctrlKey && !event.button;
+}
+
+function defaultContainer() {
+  return this.parentNode;
+}
+
+function defaultSubject(d) {
+  return d == null ? {x: event.x, y: event.y} : d;
+}
+
+function defaultTouchable$1() {
+  return navigator.maxTouchPoints || ("ontouchstart" in this);
+}
+
+function drag() {
+  var filter = defaultFilter$1,
+      container = defaultContainer,
+      subject = defaultSubject,
+      touchable = defaultTouchable$1,
+      gestures = {},
+      listeners = dispatch("start", "drag", "end"),
+      active = 0,
+      mousedownx,
+      mousedowny,
+      mousemoving,
+      touchending,
+      clickDistance2 = 0;
+
+  function drag(selection) {
+    selection
+        .on("mousedown.drag", mousedowned)
+      .filter(touchable)
+        .on("touchstart.drag", touchstarted)
+        .on("touchmove.drag", touchmoved)
+        .on("touchend.drag touchcancel.drag", touchended)
+        .style("touch-action", "none")
+        .style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
+  }
+
+  function mousedowned() {
+    if (touchending || !filter.apply(this, arguments)) return;
+    var gesture = beforestart("mouse", container.apply(this, arguments), mouse, this, arguments);
+    if (!gesture) return;
+    d3Select(event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
+    dragDisable(event.view);
+    nopropagation$1();
+    mousemoving = false;
+    mousedownx = event.clientX;
+    mousedowny = event.clientY;
+    gesture("start");
+  }
+
+  function mousemoved() {
+    noevent$1();
+    if (!mousemoving) {
+      var dx = event.clientX - mousedownx, dy = event.clientY - mousedowny;
+      mousemoving = dx * dx + dy * dy > clickDistance2;
+    }
+    gestures.mouse("drag");
+  }
+
+  function mouseupped() {
+    d3Select(event.view).on("mousemove.drag mouseup.drag", null);
+    yesdrag(event.view, mousemoving);
+    noevent$1();
+    gestures.mouse("end");
+  }
+
+  function touchstarted() {
+    if (!filter.apply(this, arguments)) return;
+    var touches = event.changedTouches,
+        c = container.apply(this, arguments),
+        n = touches.length, i, gesture;
+
+    for (i = 0; i < n; ++i) {
+      if (gesture = beforestart(touches[i].identifier, c, touch, this, arguments)) {
+        nopropagation$1();
+        gesture("start");
+      }
+    }
+  }
+
+  function touchmoved() {
+    var touches = event.changedTouches,
+        n = touches.length, i, gesture;
+
+    for (i = 0; i < n; ++i) {
+      if (gesture = gestures[touches[i].identifier]) {
+        noevent$1();
+        gesture("drag");
+      }
+    }
+  }
+
+  function touchended() {
+    var touches = event.changedTouches,
+        n = touches.length, i, gesture;
+
+    if (touchending) clearTimeout(touchending);
+    touchending = setTimeout(function() { touchending = null; }, 500); // Ghost clicks are delayed!
+    for (i = 0; i < n; ++i) {
+      if (gesture = gestures[touches[i].identifier]) {
+        nopropagation$1();
+        gesture("end");
+      }
+    }
+  }
+
+  function beforestart(id, container, point, that, args) {
+    var p = point(container, id), s, dx, dy,
+        sublisteners = listeners.copy();
+
+    if (!customEvent(new DragEvent(drag, "beforestart", s, id, active, p[0], p[1], 0, 0, sublisteners), function() {
+      if ((event.subject = s = subject.apply(that, args)) == null) return false;
+      dx = s.x - p[0] || 0;
+      dy = s.y - p[1] || 0;
+      return true;
+    })) return;
+
+    return function gesture(type) {
+      var p0 = p, n;
+      switch (type) {
+        case "start": gestures[id] = gesture, n = active++; break;
+        case "end": delete gestures[id], --active; // nobreak
+        case "drag": p = point(container, id), n = active; break;
+      }
+      customEvent(new DragEvent(drag, type, s, id, n, p[0] + dx, p[1] + dy, p[0] - p0[0], p[1] - p0[1], sublisteners), sublisteners.apply, sublisteners, [type, that, args]);
+    };
+  }
+
+  drag.filter = function(_) {
+    return arguments.length ? (filter = typeof _ === "function" ? _ : constant$2(!!_), drag) : filter;
+  };
+
+  drag.container = function(_) {
+    return arguments.length ? (container = typeof _ === "function" ? _ : constant$2(_), drag) : container;
+  };
+
+  drag.subject = function(_) {
+    return arguments.length ? (subject = typeof _ === "function" ? _ : constant$2(_), drag) : subject;
+  };
+
+  drag.touchable = function(_) {
+    return arguments.length ? (touchable = typeof _ === "function" ? _ : constant$2(!!_), drag) : touchable;
+  };
+
+  drag.on = function() {
+    var value = listeners.on.apply(listeners, arguments);
+    return value === listeners ? drag : value;
+  };
+
+  drag.clickDistance = function(_) {
+    return arguments.length ? (clickDistance2 = (_ = +_) * _, drag) : Math.sqrt(clickDistance2);
+  };
+
+  return drag;
+}
+
+var rho = Math.SQRT2,
+    rho2 = 2,
+    rho4 = 4,
+    epsilon2 = 1e-12;
+
+function cosh(x) {
+  return ((x = Math.exp(x)) + 1 / x) / 2;
+}
+
+function sinh(x) {
+  return ((x = Math.exp(x)) - 1 / x) / 2;
+}
+
+function tanh(x) {
+  return ((x = Math.exp(2 * x)) - 1) / (x + 1);
+}
+
+// p0 = [ux0, uy0, w0]
+// p1 = [ux1, uy1, w1]
+function interpolateZoom(p0, p1) {
+  var ux0 = p0[0], uy0 = p0[1], w0 = p0[2],
+      ux1 = p1[0], uy1 = p1[1], w1 = p1[2],
+      dx = ux1 - ux0,
+      dy = uy1 - uy0,
+      d2 = dx * dx + dy * dy,
+      i,
+      S;
+
+  // Special case for u0 ≅ u1.
+  if (d2 < epsilon2) {
+    S = Math.log(w1 / w0) / rho;
+    i = function(t) {
+      return [
+        ux0 + t * dx,
+        uy0 + t * dy,
+        w0 * Math.exp(rho * t * S)
+      ];
+    };
+  }
+
+  // General case.
+  else {
+    var d1 = Math.sqrt(d2),
+        b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1),
+        b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1),
+        r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0),
+        r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
+    S = (r1 - r0) / rho;
+    i = function(t) {
+      var s = t * S,
+          coshr0 = cosh(r0),
+          u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
+      return [
+        ux0 + u * dx,
+        uy0 + u * dy,
+        w0 * coshr0 / cosh(rho * s + r0)
+      ];
+    };
+  }
+
+  i.duration = S * 1000;
+
+  return i;
+}
+
+function center(x, y) {
+  var nodes;
+
+  if (x == null) x = 0;
+  if (y == null) y = 0;
+
+  function force() {
+    var i,
+        n = nodes.length,
+        node,
+        sx = 0,
+        sy = 0;
+
+    for (i = 0; i < n; ++i) {
+      node = nodes[i], sx += node.x, sy += node.y;
+    }
+
+    for (sx = sx / n - x, sy = sy / n - y, i = 0; i < n; ++i) {
+      node = nodes[i], node.x -= sx, node.y -= sy;
+    }
+  }
+
+  force.initialize = function(_) {
+    nodes = _;
+  };
+
+  force.x = function(_) {
+    return arguments.length ? (x = +_, force) : x;
+  };
+
+  force.y = function(_) {
+    return arguments.length ? (y = +_, force) : y;
+  };
+
+  return force;
+}
+
+function constant$1(x) {
+  return function() {
+    return x;
+  };
+}
+
+function jiggle() {
+  return (Math.random() - 0.5) * 1e-6;
+}
+
+function x$2(d) {
+  return d.x + d.vx;
+}
+
+function y$2(d) {
+  return d.y + d.vy;
+}
+
+function collide(radius) {
+  var nodes,
+      radii,
+      strength = 1,
+      iterations = 1;
+
+  if (typeof radius !== "function") radius = constant$1(radius == null ? 1 : +radius);
+
+  function force() {
+    var i, n = nodes.length,
+        tree,
+        node,
+        xi,
+        yi,
+        ri,
+        ri2;
+
+    for (var k = 0; k < iterations; ++k) {
+      tree = quadtree(nodes, x$2, y$2).visitAfter(prepare);
+      for (i = 0; i < n; ++i) {
+        node = nodes[i];
+        ri = radii[node.index], ri2 = ri * ri;
+        xi = node.x + node.vx;
+        yi = node.y + node.vy;
+        tree.visit(apply);
+      }
+    }
+
+    function apply(quad, x0, y0, x1, y1) {
+      var data = quad.data, rj = quad.r, r = ri + rj;
+      if (data) {
+        if (data.index > node.index) {
+          var x = xi - data.x - data.vx,
+              y = yi - data.y - data.vy,
+              l = x * x + y * y;
+          if (l < r * r) {
+            if (x === 0) x = jiggle(), l += x * x;
+            if (y === 0) y = jiggle(), l += y * y;
+            l = (r - (l = Math.sqrt(l))) / l * strength;
+            node.vx += (x *= l) * (r = (rj *= rj) / (ri2 + rj));
+            node.vy += (y *= l) * r;
+            data.vx -= x * (r = 1 - r);
+            data.vy -= y * r;
+          }
+        }
+        return;
+      }
+      return x0 > xi + r || x1 < xi - r || y0 > yi + r || y1 < yi - r;
+    }
+  }
+
+  function prepare(quad) {
+    if (quad.data) return quad.r = radii[quad.data.index];
+    for (var i = quad.r = 0; i < 4; ++i) {
+      if (quad[i] && quad[i].r > quad.r) {
+        quad.r = quad[i].r;
+      }
+    }
+  }
+
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length, node;
+    radii = new Array(n);
+    for (i = 0; i < n; ++i) node = nodes[i], radii[node.index] = +radius(node, i, nodes);
+  }
+
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+
+  force.iterations = function(_) {
+    return arguments.length ? (iterations = +_, force) : iterations;
+  };
+
+  force.strength = function(_) {
+    return arguments.length ? (strength = +_, force) : strength;
+  };
+
+  force.radius = function(_) {
+    return arguments.length ? (radius = typeof _ === "function" ? _ : constant$1(+_), initialize(), force) : radius;
+  };
+
+  return force;
+}
+
+function index(d) {
+  return d.index;
+}
+
+function find(nodeById, nodeId) {
+  var node = nodeById.get(nodeId);
+  if (!node) throw new Error("missing: " + nodeId);
+  return node;
+}
+
+function link(links) {
+  var id = index,
+      strength = defaultStrength,
+      strengths,
+      distance = constant$1(30),
+      distances,
+      nodes,
+      count,
+      bias,
+      iterations = 1;
+
+  if (links == null) links = [];
+
+  function defaultStrength(link) {
+    return 1 / Math.min(count[link.source.index], count[link.target.index]);
+  }
+
+  function force(alpha) {
+    for (var k = 0, n = links.length; k < iterations; ++k) {
+      for (var i = 0, link, source, target, x, y, l, b; i < n; ++i) {
+        link = links[i], source = link.source, target = link.target;
+        x = target.x + target.vx - source.x - source.vx || jiggle();
+        y = target.y + target.vy - source.y - source.vy || jiggle();
+        l = Math.sqrt(x * x + y * y);
+        l = (l - distances[i]) / l * alpha * strengths[i];
+        x *= l, y *= l;
+        target.vx -= x * (b = bias[i]);
+        target.vy -= y * b;
+        source.vx += x * (b = 1 - b);
+        source.vy += y * b;
+      }
+    }
+  }
+
+  function initialize() {
+    if (!nodes) return;
+
+    var i,
+        n = nodes.length,
+        m = links.length,
+        nodeById = map(nodes, id),
+        link;
+
+    for (i = 0, count = new Array(n); i < m; ++i) {
+      link = links[i], link.index = i;
+      if (typeof link.source !== "object") link.source = find(nodeById, link.source);
+      if (typeof link.target !== "object") link.target = find(nodeById, link.target);
+      count[link.source.index] = (count[link.source.index] || 0) + 1;
+      count[link.target.index] = (count[link.target.index] || 0) + 1;
+    }
+
+    for (i = 0, bias = new Array(m); i < m; ++i) {
+      link = links[i], bias[i] = count[link.source.index] / (count[link.source.index] + count[link.target.index]);
+    }
+
+    strengths = new Array(m), initializeStrength();
+    distances = new Array(m), initializeDistance();
+  }
+
+  function initializeStrength() {
+    if (!nodes) return;
+
+    for (var i = 0, n = links.length; i < n; ++i) {
+      strengths[i] = +strength(links[i], i, links);
+    }
+  }
+
+  function initializeDistance() {
+    if (!nodes) return;
+
+    for (var i = 0, n = links.length; i < n; ++i) {
+      distances[i] = +distance(links[i], i, links);
+    }
+  }
+
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+
+  force.links = function(_) {
+    return arguments.length ? (links = _, initialize(), force) : links;
+  };
+
+  force.id = function(_) {
+    return arguments.length ? (id = _, force) : id;
+  };
+
+  force.iterations = function(_) {
+    return arguments.length ? (iterations = +_, force) : iterations;
+  };
+
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant$1(+_), initializeStrength(), force) : strength;
+  };
+
+  force.distance = function(_) {
+    return arguments.length ? (distance = typeof _ === "function" ? _ : constant$1(+_), initializeDistance(), force) : distance;
+  };
+
+  return force;
+}
+
+function x$1(d) {
+  return d.x;
+}
+
+function y$1(d) {
+  return d.y;
+}
+
+var initialRadius = 10,
+    initialAngle = Math.PI * (3 - Math.sqrt(5));
+
+function simulation(nodes) {
+  var simulation,
+      alpha = 1,
+      alphaMin = 0.001,
+      alphaDecay = 1 - Math.pow(alphaMin, 1 / 300),
+      alphaTarget = 0,
+      velocityDecay = 0.6,
+      forces = map(),
+      stepper = timer(step),
+      event = dispatch("tick", "end");
+
+  if (nodes == null) nodes = [];
+
+  function step() {
+    tick();
+    event.call("tick", simulation);
+    if (alpha < alphaMin) {
+      stepper.stop();
+      event.call("end", simulation);
+    }
+  }
+
+  function tick(iterations) {
+    var i, n = nodes.length, node;
+
+    if (iterations === undefined) iterations = 1;
+
+    for (var k = 0; k < iterations; ++k) {
+      alpha += (alphaTarget - alpha) * alphaDecay;
+
+      forces.each(function (force) {
+        force(alpha);
+      });
+
+      for (i = 0; i < n; ++i) {
+        node = nodes[i];
+        if (node.fx == null) node.x += node.vx *= velocityDecay;
+        else node.x = node.fx, node.vx = 0;
+        if (node.fy == null) node.y += node.vy *= velocityDecay;
+        else node.y = node.fy, node.vy = 0;
+      }
+    }
+
+    return simulation;
+  }
+
+  function initializeNodes() {
+    for (var i = 0, n = nodes.length, node; i < n; ++i) {
+      node = nodes[i], node.index = i;
+      if (node.fx != null) node.x = node.fx;
+      if (node.fy != null) node.y = node.fy;
+      if (isNaN(node.x) || isNaN(node.y)) {
+        var radius = initialRadius * Math.sqrt(i), angle = i * initialAngle;
+        node.x = radius * Math.cos(angle);
+        node.y = radius * Math.sin(angle);
+      }
+      if (isNaN(node.vx) || isNaN(node.vy)) {
+        node.vx = node.vy = 0;
+      }
+    }
+  }
+
+  function initializeForce(force) {
+    if (force.initialize) force.initialize(nodes);
+    return force;
+  }
+
+  initializeNodes();
+
+  return simulation = {
+    tick: tick,
+
+    restart: function() {
+      return stepper.restart(step), simulation;
+    },
+
+    stop: function() {
+      return stepper.stop(), simulation;
+    },
+
+    nodes: function(_) {
+      return arguments.length ? (nodes = _, initializeNodes(), forces.each(initializeForce), simulation) : nodes;
+    },
+
+    alpha: function(_) {
+      return arguments.length ? (alpha = +_, simulation) : alpha;
+    },
+
+    alphaMin: function(_) {
+      return arguments.length ? (alphaMin = +_, simulation) : alphaMin;
+    },
+
+    alphaDecay: function(_) {
+      return arguments.length ? (alphaDecay = +_, simulation) : +alphaDecay;
+    },
+
+    alphaTarget: function(_) {
+      return arguments.length ? (alphaTarget = +_, simulation) : alphaTarget;
+    },
+
+    velocityDecay: function(_) {
+      return arguments.length ? (velocityDecay = 1 - _, simulation) : 1 - velocityDecay;
+    },
+
+    force: function(name, _) {
+      return arguments.length > 1 ? ((_ == null ? forces.remove(name) : forces.set(name, initializeForce(_))), simulation) : forces.get(name);
+    },
+
+    find: function(x, y, radius) {
+      var i = 0,
+          n = nodes.length,
+          dx,
+          dy,
+          d2,
+          node,
+          closest;
+
+      if (radius == null) radius = Infinity;
+      else radius *= radius;
+
+      for (i = 0; i < n; ++i) {
+        node = nodes[i];
+        dx = x - node.x;
+        dy = y - node.y;
+        d2 = dx * dx + dy * dy;
+        if (d2 < radius) closest = node, radius = d2;
+      }
+
+      return closest;
+    },
+
+    on: function(name, _) {
+      return arguments.length > 1 ? (event.on(name, _), simulation) : event.on(name);
+    }
+  };
+}
+
+function manyBody() {
+  var nodes,
+      node,
+      alpha,
+      strength = constant$1(-30),
+      strengths,
+      distanceMin2 = 1,
+      distanceMax2 = Infinity,
+      theta2 = 0.81;
+
+  function force(_) {
+    var i, n = nodes.length, tree = quadtree(nodes, x$1, y$1).visitAfter(accumulate);
+    for (alpha = _, i = 0; i < n; ++i) node = nodes[i], tree.visit(apply);
+  }
+
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length, node;
+    strengths = new Array(n);
+    for (i = 0; i < n; ++i) node = nodes[i], strengths[node.index] = +strength(node, i, nodes);
+  }
+
+  function accumulate(quad) {
+    var strength = 0, q, c, weight = 0, x, y, i;
+
+    // For internal nodes, accumulate forces from child quadrants.
+    if (quad.length) {
+      for (x = y = i = 0; i < 4; ++i) {
+        if ((q = quad[i]) && (c = Math.abs(q.value))) {
+          strength += q.value, weight += c, x += c * q.x, y += c * q.y;
+        }
+      }
+      quad.x = x / weight;
+      quad.y = y / weight;
+    }
+
+    // For leaf nodes, accumulate forces from coincident quadrants.
+    else {
+      q = quad;
+      q.x = q.data.x;
+      q.y = q.data.y;
+      do strength += strengths[q.data.index];
+      while (q = q.next);
+    }
+
+    quad.value = strength;
+  }
+
+  function apply(quad, x1, _, x2) {
+    if (!quad.value) return true;
+
+    var x = quad.x - node.x,
+        y = quad.y - node.y,
+        w = x2 - x1,
+        l = x * x + y * y;
+
+    // Apply the Barnes-Hut approximation if possible.
+    // Limit forces for very close nodes; randomize direction if coincident.
+    if (w * w / theta2 < l) {
+      if (l < distanceMax2) {
+        if (x === 0) x = jiggle(), l += x * x;
+        if (y === 0) y = jiggle(), l += y * y;
+        if (l < distanceMin2) l = Math.sqrt(distanceMin2 * l);
+        node.vx += x * quad.value * alpha / l;
+        node.vy += y * quad.value * alpha / l;
+      }
+      return true;
+    }
+
+    // Otherwise, process points directly.
+    else if (quad.length || l >= distanceMax2) return;
+
+    // Limit forces for very close nodes; randomize direction if coincident.
+    if (quad.data !== node || quad.next) {
+      if (x === 0) x = jiggle(), l += x * x;
+      if (y === 0) y = jiggle(), l += y * y;
+      if (l < distanceMin2) l = Math.sqrt(distanceMin2 * l);
+    }
+
+    do if (quad.data !== node) {
+      w = strengths[quad.data.index] * alpha / l;
+      node.vx += x * w;
+      node.vy += y * w;
+    } while (quad = quad.next);
+  }
+
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant$1(+_), initialize(), force) : strength;
+  };
+
+  force.distanceMin = function(_) {
+    return arguments.length ? (distanceMin2 = _ * _, force) : Math.sqrt(distanceMin2);
+  };
+
+  force.distanceMax = function(_) {
+    return arguments.length ? (distanceMax2 = _ * _, force) : Math.sqrt(distanceMax2);
+  };
+
+  force.theta = function(_) {
+    return arguments.length ? (theta2 = _ * _, force) : Math.sqrt(theta2);
+  };
+
+  return force;
+}
+
+function radial(radius, x, y) {
+  var nodes,
+      strength = constant$1(0.1),
+      strengths,
+      radiuses;
+
+  if (typeof radius !== "function") radius = constant$1(+radius);
+  if (x == null) x = 0;
+  if (y == null) y = 0;
+
+  function force(alpha) {
+    for (var i = 0, n = nodes.length; i < n; ++i) {
+      var node = nodes[i],
+          dx = node.x - x || 1e-6,
+          dy = node.y - y || 1e-6,
+          r = Math.sqrt(dx * dx + dy * dy),
+          k = (radiuses[i] - r) * strengths[i] * alpha / r;
+      node.vx += dx * k;
+      node.vy += dy * k;
+    }
+  }
+
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length;
+    strengths = new Array(n);
+    radiuses = new Array(n);
+    for (i = 0; i < n; ++i) {
+      radiuses[i] = +radius(nodes[i], i, nodes);
+      strengths[i] = isNaN(radiuses[i]) ? 0 : +strength(nodes[i], i, nodes);
+    }
+  }
+
+  force.initialize = function(_) {
+    nodes = _, initialize();
+  };
+
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant$1(+_), initialize(), force) : strength;
+  };
+
+  force.radius = function(_) {
+    return arguments.length ? (radius = typeof _ === "function" ? _ : constant$1(+_), initialize(), force) : radius;
+  };
+
+  force.x = function(_) {
+    return arguments.length ? (x = +_, force) : x;
+  };
+
+  force.y = function(_) {
+    return arguments.length ? (y = +_, force) : y;
+  };
+
+  return force;
+}
+
+function x(x) {
+  var strength = constant$1(0.1),
+      nodes,
+      strengths,
+      xz;
+
+  if (typeof x !== "function") x = constant$1(x == null ? 0 : +x);
+
+  function force(alpha) {
+    for (var i = 0, n = nodes.length, node; i < n; ++i) {
+      node = nodes[i], node.vx += (xz[i] - node.x) * strengths[i] * alpha;
+    }
+  }
+
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length;
+    strengths = new Array(n);
+    xz = new Array(n);
+    for (i = 0; i < n; ++i) {
+      strengths[i] = isNaN(xz[i] = +x(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
+    }
+  }
+
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant$1(+_), initialize(), force) : strength;
+  };
+
+  force.x = function(_) {
+    return arguments.length ? (x = typeof _ === "function" ? _ : constant$1(+_), initialize(), force) : x;
+  };
+
+  return force;
+}
+
+function y(y) {
+  var strength = constant$1(0.1),
+      nodes,
+      strengths,
+      yz;
+
+  if (typeof y !== "function") y = constant$1(y == null ? 0 : +y);
+
+  function force(alpha) {
+    for (var i = 0, n = nodes.length, node; i < n; ++i) {
+      node = nodes[i], node.vy += (yz[i] - node.y) * strengths[i] * alpha;
+    }
+  }
+
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length;
+    strengths = new Array(n);
+    yz = new Array(n);
+    for (i = 0; i < n; ++i) {
+      strengths[i] = isNaN(yz[i] = +y(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
+    }
+  }
+
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant$1(+_), initialize(), force) : strength;
+  };
+
+  force.y = function(_) {
+    return arguments.length ? (y = typeof _ === "function" ? _ : constant$1(+_), initialize(), force) : y;
+  };
+
+  return force;
+}
+
+function constant(x) {
+  return function() {
+    return x;
+  };
+}
+
+function ZoomEvent(target, type, transform) {
+  this.target = target;
+  this.type = type;
+  this.transform = transform;
+}
+
+function nopropagation() {
+  event.stopImmediatePropagation();
+}
+
+function noevent() {
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+
+// Ignore right-click, since that should open the context menu.
+function defaultFilter() {
+  return !event.ctrlKey && !event.button;
+}
+
+function defaultExtent() {
+  var e = this;
+  if (e instanceof SVGElement) {
+    e = e.ownerSVGElement || e;
+    if (e.hasAttribute("viewBox")) {
+      e = e.viewBox.baseVal;
+      return [[e.x, e.y], [e.x + e.width, e.y + e.height]];
+    }
+    return [[0, 0], [e.width.baseVal.value, e.height.baseVal.value]];
+  }
+  return [[0, 0], [e.clientWidth, e.clientHeight]];
+}
+
+function defaultTransform() {
+  return this.__zoom || identity;
+}
+
+function defaultWheelDelta() {
+  return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002);
+}
+
+function defaultTouchable() {
+  return navigator.maxTouchPoints || ("ontouchstart" in this);
+}
+
+function defaultConstrain(transform, extent, translateExtent) {
+  var dx0 = transform.invertX(extent[0][0]) - translateExtent[0][0],
+      dx1 = transform.invertX(extent[1][0]) - translateExtent[1][0],
+      dy0 = transform.invertY(extent[0][1]) - translateExtent[0][1],
+      dy1 = transform.invertY(extent[1][1]) - translateExtent[1][1];
+  return transform.translate(
+    dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1),
+    dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)
+  );
+}
+
+function zoom() {
+  var filter = defaultFilter,
+      extent = defaultExtent,
+      constrain = defaultConstrain,
+      wheelDelta = defaultWheelDelta,
+      touchable = defaultTouchable,
+      scaleExtent = [0, Infinity],
+      translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]],
+      duration = 250,
+      interpolate = interpolateZoom,
+      listeners = dispatch("start", "zoom", "end"),
+      touchstarting,
+      touchending,
+      touchDelay = 500,
+      wheelDelay = 150,
+      clickDistance2 = 0;
+
+  function zoom(selection) {
+    selection
+        .property("__zoom", defaultTransform)
+        .on("wheel.zoom", wheeled)
+        .on("mousedown.zoom", mousedowned)
+        .on("dblclick.zoom", dblclicked)
+      .filter(touchable)
+        .on("touchstart.zoom", touchstarted)
+        .on("touchmove.zoom", touchmoved)
+        .on("touchend.zoom touchcancel.zoom", touchended)
+        .style("touch-action", "none")
+        .style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
+  }
+
+  zoom.transform = function(collection, transform, point) {
+    var selection = collection.selection ? collection.selection() : collection;
+    selection.property("__zoom", defaultTransform);
+    if (collection !== selection) {
+      schedule(collection, transform, point);
+    } else {
+      selection.interrupt().each(function() {
+        gesture(this, arguments)
+            .start()
+            .zoom(null, typeof transform === "function" ? transform.apply(this, arguments) : transform)
+            .end();
+      });
+    }
+  };
+
+  zoom.scaleBy = function(selection, k, p) {
+    zoom.scaleTo(selection, function() {
+      var k0 = this.__zoom.k,
+          k1 = typeof k === "function" ? k.apply(this, arguments) : k;
+      return k0 * k1;
+    }, p);
+  };
+
+  zoom.scaleTo = function(selection, k, p) {
+    zoom.transform(selection, function() {
+      var e = extent.apply(this, arguments),
+          t0 = this.__zoom,
+          p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p,
+          p1 = t0.invert(p0),
+          k1 = typeof k === "function" ? k.apply(this, arguments) : k;
+      return constrain(translate(scale(t0, k1), p0, p1), e, translateExtent);
+    }, p);
+  };
+
+  zoom.translateBy = function(selection, x, y) {
+    zoom.transform(selection, function() {
+      return constrain(this.__zoom.translate(
+        typeof x === "function" ? x.apply(this, arguments) : x,
+        typeof y === "function" ? y.apply(this, arguments) : y
+      ), extent.apply(this, arguments), translateExtent);
+    });
+  };
+
+  zoom.translateTo = function(selection, x, y, p) {
+    zoom.transform(selection, function() {
+      var e = extent.apply(this, arguments),
+          t = this.__zoom,
+          p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
+      return constrain(identity.translate(p0[0], p0[1]).scale(t.k).translate(
+        typeof x === "function" ? -x.apply(this, arguments) : -x,
+        typeof y === "function" ? -y.apply(this, arguments) : -y
+      ), e, translateExtent);
+    }, p);
+  };
+
+  function scale(transform, k) {
+    k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], k));
+    return k === transform.k ? transform : new Transform(k, transform.x, transform.y);
+  }
+
+  function translate(transform, p0, p1) {
+    var x = p0[0] - p1[0] * transform.k, y = p0[1] - p1[1] * transform.k;
+    return x === transform.x && y === transform.y ? transform : new Transform(transform.k, x, y);
+  }
+
+  function centroid(extent) {
+    return [(+extent[0][0] + +extent[1][0]) / 2, (+extent[0][1] + +extent[1][1]) / 2];
+  }
+
+  function schedule(transition, transform, point) {
+    transition
+        .on("start.zoom", function() { gesture(this, arguments).start(); })
+        .on("interrupt.zoom end.zoom", function() { gesture(this, arguments).end(); })
+        .tween("zoom", function() {
+          var that = this,
+              args = arguments,
+              g = gesture(that, args),
+              e = extent.apply(that, args),
+              p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point,
+              w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]),
+              a = that.__zoom,
+              b = typeof transform === "function" ? transform.apply(that, args) : transform,
+              i = interpolate(a.invert(p).concat(w / a.k), b.invert(p).concat(w / b.k));
+          return function(t) {
+            if (t === 1) t = b; // Avoid rounding error on end.
+            else { var l = i(t), k = w / l[2]; t = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k); }
+            g.zoom(null, t);
+          };
+        });
+  }
+
+  function gesture(that, args, clean) {
+    return (!clean && that.__zooming) || new Gesture(that, args);
+  }
+
+  function Gesture(that, args) {
+    this.that = that;
+    this.args = args;
+    this.active = 0;
+    this.extent = extent.apply(that, args);
+    this.taps = 0;
+  }
+
+  Gesture.prototype = {
+    start: function() {
+      if (++this.active === 1) {
+        this.that.__zooming = this;
+        this.emit("start");
+      }
+      return this;
+    },
+    zoom: function(key, transform) {
+      if (this.mouse && key !== "mouse") this.mouse[1] = transform.invert(this.mouse[0]);
+      if (this.touch0 && key !== "touch") this.touch0[1] = transform.invert(this.touch0[0]);
+      if (this.touch1 && key !== "touch") this.touch1[1] = transform.invert(this.touch1[0]);
+      this.that.__zoom = transform;
+      this.emit("zoom");
+      return this;
+    },
+    end: function() {
+      if (--this.active === 0) {
+        delete this.that.__zooming;
+        this.emit("end");
+      }
+      return this;
+    },
+    emit: function(type) {
+      customEvent(new ZoomEvent(zoom, type, this.that.__zoom), listeners.apply, listeners, [type, this.that, this.args]);
+    }
+  };
+
+  function wheeled() {
+    if (!filter.apply(this, arguments)) return;
+    var g = gesture(this, arguments),
+        t = this.__zoom,
+        k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t.k * Math.pow(2, wheelDelta.apply(this, arguments)))),
+        p = mouse(this);
+
+    // If the mouse is in the same location as before, reuse it.
+    // If there were recent wheel events, reset the wheel idle timeout.
+    if (g.wheel) {
+      if (g.mouse[0][0] !== p[0] || g.mouse[0][1] !== p[1]) {
+        g.mouse[1] = t.invert(g.mouse[0] = p);
+      }
+      clearTimeout(g.wheel);
+    }
+
+    // If this wheel event won’t trigger a transform change, ignore it.
+    else if (t.k === k) return;
+
+    // Otherwise, capture the mouse point and location at the start.
+    else {
+      g.mouse = [p, t.invert(p)];
+      interrupt(this);
+      g.start();
+    }
+
+    noevent();
+    g.wheel = setTimeout(wheelidled, wheelDelay);
+    g.zoom("mouse", constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
+
+    function wheelidled() {
+      g.wheel = null;
+      g.end();
+    }
+  }
+
+  function mousedowned() {
+    if (touchending || !filter.apply(this, arguments)) return;
+    var g = gesture(this, arguments, true),
+        v = d3Select(event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true),
+        p = mouse(this),
+        x0 = event.clientX,
+        y0 = event.clientY;
+
+    dragDisable(event.view);
+    nopropagation();
+    g.mouse = [p, this.__zoom.invert(p)];
+    interrupt(this);
+    g.start();
+
+    function mousemoved() {
+      noevent();
+      if (!g.moved) {
+        var dx = event.clientX - x0, dy = event.clientY - y0;
+        g.moved = dx * dx + dy * dy > clickDistance2;
+      }
+      g.zoom("mouse", constrain(translate(g.that.__zoom, g.mouse[0] = mouse(g.that), g.mouse[1]), g.extent, translateExtent));
+    }
+
+    function mouseupped() {
+      v.on("mousemove.zoom mouseup.zoom", null);
+      yesdrag(event.view, g.moved);
+      noevent();
+      g.end();
+    }
+  }
+
+  function dblclicked() {
+    if (!filter.apply(this, arguments)) return;
+    var t0 = this.__zoom,
+        p0 = mouse(this),
+        p1 = t0.invert(p0),
+        k1 = t0.k * (event.shiftKey ? 0.5 : 2),
+        t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, arguments), translateExtent);
+
+    noevent();
+    if (duration > 0) d3Select(this).transition().duration(duration).call(schedule, t1, p0);
+    else d3Select(this).call(zoom.transform, t1);
+  }
+
+  function touchstarted() {
+    if (!filter.apply(this, arguments)) return;
+    var touches = event.touches,
+        n = touches.length,
+        g = gesture(this, arguments, event.changedTouches.length === n),
+        started, i, t, p;
+
+    nopropagation();
+    for (i = 0; i < n; ++i) {
+      t = touches[i], p = touch(this, touches, t.identifier);
+      p = [p, this.__zoom.invert(p), t.identifier];
+      if (!g.touch0) g.touch0 = p, started = true, g.taps = 1 + !!touchstarting;
+      else if (!g.touch1 && g.touch0[2] !== p[2]) g.touch1 = p, g.taps = 0;
+    }
+
+    if (touchstarting) touchstarting = clearTimeout(touchstarting);
+
+    if (started) {
+      if (g.taps < 2) touchstarting = setTimeout(function() { touchstarting = null; }, touchDelay);
+      interrupt(this);
+      g.start();
+    }
+  }
+
+  function touchmoved() {
+    if (!this.__zooming) return;
+    var g = gesture(this, arguments),
+        touches = event.changedTouches,
+        n = touches.length, i, t, p, l;
+
+    noevent();
+    if (touchstarting) touchstarting = clearTimeout(touchstarting);
+    g.taps = 0;
+    for (i = 0; i < n; ++i) {
+      t = touches[i], p = touch(this, touches, t.identifier);
+      if (g.touch0 && g.touch0[2] === t.identifier) g.touch0[0] = p;
+      else if (g.touch1 && g.touch1[2] === t.identifier) g.touch1[0] = p;
+    }
+    t = g.that.__zoom;
+    if (g.touch1) {
+      var p0 = g.touch0[0], l0 = g.touch0[1],
+          p1 = g.touch1[0], l1 = g.touch1[1],
+          dp = (dp = p1[0] - p0[0]) * dp + (dp = p1[1] - p0[1]) * dp,
+          dl = (dl = l1[0] - l0[0]) * dl + (dl = l1[1] - l0[1]) * dl;
+      t = scale(t, Math.sqrt(dp / dl));
+      p = [(p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2];
+      l = [(l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2];
+    }
+    else if (g.touch0) p = g.touch0[0], l = g.touch0[1];
+    else return;
+    g.zoom("touch", constrain(translate(t, p, l), g.extent, translateExtent));
+  }
+
+  function touchended() {
+    if (!this.__zooming) return;
+    var g = gesture(this, arguments),
+        touches = event.changedTouches,
+        n = touches.length, i, t;
+
+    nopropagation();
+    if (touchending) clearTimeout(touchending);
+    touchending = setTimeout(function() { touchending = null; }, touchDelay);
+    for (i = 0; i < n; ++i) {
+      t = touches[i];
+      if (g.touch0 && g.touch0[2] === t.identifier) delete g.touch0;
+      else if (g.touch1 && g.touch1[2] === t.identifier) delete g.touch1;
+    }
+    if (g.touch1 && !g.touch0) g.touch0 = g.touch1, delete g.touch1;
+    if (g.touch0) g.touch0[1] = this.__zoom.invert(g.touch0[0]);
+    else {
+      g.end();
+      // If this was a dbltap, reroute to the (optional) dblclick.zoom handler.
+      if (g.taps === 2) {
+        var p = d3Select(this).on("dblclick.zoom");
+        if (p) p.apply(this, arguments);
+      }
+    }
+  }
+
+  zoom.wheelDelta = function(_) {
+    return arguments.length ? (wheelDelta = typeof _ === "function" ? _ : constant(+_), zoom) : wheelDelta;
+  };
+
+  zoom.filter = function(_) {
+    return arguments.length ? (filter = typeof _ === "function" ? _ : constant(!!_), zoom) : filter;
+  };
+
+  zoom.touchable = function(_) {
+    return arguments.length ? (touchable = typeof _ === "function" ? _ : constant(!!_), zoom) : touchable;
+  };
+
+  zoom.extent = function(_) {
+    return arguments.length ? (extent = typeof _ === "function" ? _ : constant([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
+  };
+
+  zoom.scaleExtent = function(_) {
+    return arguments.length ? (scaleExtent[0] = +_[0], scaleExtent[1] = +_[1], zoom) : [scaleExtent[0], scaleExtent[1]];
+  };
+
+  zoom.translateExtent = function(_) {
+    return arguments.length ? (translateExtent[0][0] = +_[0][0], translateExtent[1][0] = +_[1][0], translateExtent[0][1] = +_[0][1], translateExtent[1][1] = +_[1][1], zoom) : [[translateExtent[0][0], translateExtent[0][1]], [translateExtent[1][0], translateExtent[1][1]]];
+  };
+
+  zoom.constrain = function(_) {
+    return arguments.length ? (constrain = _, zoom) : constrain;
+  };
+
+  zoom.duration = function(_) {
+    return arguments.length ? (duration = +_, zoom) : duration;
+  };
+
+  zoom.interpolate = function(_) {
+    return arguments.length ? (interpolate = _, zoom) : interpolate;
+  };
+
+  zoom.on = function() {
+    var value = listeners.on.apply(listeners, arguments);
+    return value === listeners ? zoom : value;
+  };
+
+  zoom.clickDistance = function(_) {
+    return arguments.length ? (clickDistance2 = (_ = +_) * _, zoom) : Math.sqrt(clickDistance2);
+  };
+
+  return zoom;
+}
+
+var Replay = {};
+
+var _interopRequireDefault = interopRequireDefault.exports;
+
+var _interopRequireWildcard = interopRequireWildcard.exports;
+
+Object.defineProperty(Replay, "__esModule", {
+  value: true
+});
+var default_1 = Replay.default = void 0;
+
+var React = _interopRequireWildcard(React__default);
+
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
+  d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
+}), 'Replay');
+
+default_1 = Replay.default = _default;
+
+const ResetBtn = _ref => {
+  let {
+    renderSNA
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "resetBtn"
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "\u56DE\u5230\u539F\u4F86\u4F4D\u7F6E\u8207\u5927\u5C0F"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: () => renderSNA()
+  }, /*#__PURE__*/React__default.createElement(default_1, null))));
+};
+ResetBtn.propTypes = {
+  renderSNA: PropTypes.func.isRequired
+};
+
+var css_248z = ".SNA {\n  overflow: hidden;\n  object-fit: contain;\n  position: relative;\n  font-size: 0.75rem;\n  width: 100%; }\n  .SNA--smallSize .node {\n    padding-top: 8px;\n    font-size: 0.75rem;\n    width: 3rem;\n    height: 3rem;\n    overflow: hidden;\n    white-space: pre-wrap;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical; }\n  .SNA .node {\n    background-color: #4a4e69;\n    border-radius: 50%;\n    color: #fff;\n    font-size: 20px;\n    font-weight: 500;\n    height: 54px;\n    width: 54px;\n    padding-top: 15px;\n    position: absolute;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: grab; }\n  .SNA .links line {\n    stroke: #c7bfb4;\n    stroke-width: 2; }\n  .SNA .mainNode {\n    fill: #4e3a16; }\n  .SNA .person {\n    fill: #867b3a; }\n  .SNA .publication {\n    fill: #825c0d; }\n  .SNA .article {\n    fill: #afafaf; }\n  .SNA .keyword {\n    fill: #fcfae8; }\n  .SNA .org {\n    fill: #000000; }\n  .SNA #resetBtn {\n    float: right; }\n  .SNA #network-graph svg {\n    width: 100%;\n    height: 100%; }\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px; }\n    .SNA .node {\n      background-color: #4a4e69;\n      border-radius: 50%;\n      color: #fff;\n      font-size: 1px;\n      font-weight: 500;\n      height: 44px;\n      width: 44px;\n      padding-top: 12px;\n      position: absolute;\n      text-align: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: grab; } }\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px; } }\n";
+styleInject(css_248z);
+
+/* eslint-disable indent */
+var SNA = function SNA(props) {
+  // common
+  var className = props.className,
+    intl = props.intl,
+    exclude = props.exclude,
+    distance = props.distance,
+    SNAData = props.SNAData,
+    handleClickNodeGoto = props.handleClickNodeGoto,
+    DownloadExcel = props.DownloadExcel;
+  // styles
+  var width = props.width,
+    height = props.height,
+    fontColor = props.fontColor,
+    backgroundColor = props.backgroundColor,
+    iconColor = props.iconColor;
+  var g;
+  if (!SNAData || SNAData.nodes.length === 0) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "noData"
+    }, intl ? intl.formatMessage({
+      id: 'common.noData'
+    }) : '暫無資料');
+  }
+  var contentWidth = useMemo(function () {
+    return screen.width > 1050 ? width : screen.width - 80;
+  }, [screen.width]);
+  var contentHeight = useMemo(function () {
+    return screen.width > 1050 ? height : screen.height - 300;
+  }, [screen.width]);
+  var translateType = function translateType(type) {
+    switch (type) {
+      case 'mainNode':
+        // 主要搜尋中心
+        return intl ? intl.formatMessage({
+          id: 'SNA.search.center'
+        }) : '主要搜尋中心';
+      case 'organization':
+        // 組織
+        return intl ? intl.formatMessage({
+          id: 'SNA.organization'
+        }) : '組織';
+      case 'person':
+        // 作家
+        return intl ? intl.formatMessage({
+          id: 'SNA.author'
+        }) : '作家';
+      case 'publication':
+        // 著作
+        return intl ? intl.formatMessage({
+          id: 'SNA.publication'
+        }) : '作家';
+      case 'article':
+        // 單篇作品
+        return intl ? intl.formatMessage({
+          id: 'SNA.article'
+        }) : '單篇作品';
+      case 'keyword':
+        // 關鍵字
+        return intl ? intl.formatMessage({
+          id: 'SNA.keyword'
+        }) : '關鍵字';
+      case 'event':
+        // 事件
+        return intl ? intl.formatMessage({
+          id: 'SNA.event'
+        }) : '事件';
+      default:
+        return '';
+    }
+  };
+  var drag$1 = function drag$1(simulation) {
+    function dragstarted(d) {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      d.fx = d.x;
+      d.fy = d.y;
+    }
+    function dragged(d) {
+      d.fx = event.x > contentWidth - 10 || event.x < 20 ? d.x : event.x;
+      d.fy = event.y > contentHeight - 10 || event.y < 20 ? d.y : event.y;
+    }
+    return drag().on('start', dragstarted).on('drag', dragged);
+  };
+  var calculateCurve = function calculateCurve(source, target, curveLen) {
+    var mx = (target.x + source.x) * 0.5;
+    var my = (target.y + source.y) * 0.5;
+    var tsx = target.x - source.x;
+    var tsy = target.y - source.y;
+    var L = Math.pow(Math.pow(tsx, 2) + Math.pow(tsy, 2), 0.5);
+    var qx = mx - tsy * curveLen / L;
+    var qy = my + tsx * curveLen / L;
+    return {
+      qx: qx,
+      qy: qy
+    };
+  };
+  var getLineCurve = function getLineCurve(source, target, curveLen) {
+    var _calculateCurve = calculateCurve(source, target, curveLen),
+      qx = _calculateCurve.qx,
+      qy = _calculateCurve.qy;
+    if (isNaN(qx)) {
+      return "M".concat(source.x, ", ").concat(source.y, " Q0 0 ").concat(target.x, " ").concat(target.y);
+    }
+    return "M".concat(source.x, ", ").concat(source.y, " Q").concat(qx, " ").concat(qy, " ").concat(target.x, " ").concat(target.y);
+  };
+  var init = function init(networkData) {
+    var edgeLabelSize = '10px';
+    var lineRaduis = 30;
+    var nodeStroke = 1.5;
+    var nodeRadius = 10 - nodeStroke;
+    var mainNodeRadius = 15 - nodeStroke;
+    var arrowPercent = 0.8;
+    var arrowViewBox = "-0 -".concat(nodeRadius, " ").concat(nodeRadius * 2, " ").concat(nodeRadius * 2);
+    var arrowPath = "M 0,-".concat(nodeRadius * arrowPercent, " L ").concat(nodeRadius * arrowPercent * 2, " ,0 L 0,").concat(nodeRadius * arrowPercent);
+    var color = ordinal(category10);
+    var links = networkData.links.map(function (d) {
+      return Object.create(d);
+    });
+    var nodes = networkData.nodes.map(function (d) {
+      return Object.create(d);
+    });
+    var simulation$1 = simulation(nodes).force('link', link(links).id(function (d) {
+      return d.index;
+    }).distance(50)).force('charge', manyBody().strength(-200).distanceMax(1000)).force('center', center(contentWidth / 2, contentHeight / 2)).force('collide', collide().radius(function () {
+      return nodeRadius + 5;
+    }).strength(1).iterations(10)).force('x', x(contentWidth / 2)).force('y', y(contentHeight / 2)).force('radial', radial(100, contentWidth / 1.5, contentHeight / 1.5));
+    var svg = d3Select('#sna-graph').append('svg').attr('viewBox', [0, 0, contentWidth, contentHeight]).style('background-color', backgroundColor);
+    svg.append('defs').append('marker').attr('id', 'arrowhead').attr('viewBox', arrowViewBox).attr('refX', nodeRadius * 2 + nodeRadius * arrowPercent).attr('refY', 0).attr('orient', 'auto').attr('markerWidth', nodeRadius * (1 + arrowPercent)).attr('markerHeight', nodeRadius * (1 + arrowPercent)).attr('xoverflow', 'visible').append('svg:path').attr('d', arrowPath).attr('fill', '#999').style('stroke', 'none');
+    // 增加一層g用來包住所有的物件，並對此g加入縮放功能
+    g = svg.append('g');
+    var zoomActions = function zoomActions() {
+      g.attr('transform', event.transform);
+    };
+    var zoomHandler = zoom().scaleExtent([0.5, 20]).extent([[0, 0], [contentWidth, contentHeight]]).on('zoom', zoomActions);
+    zoomHandler(svg);
+    var link$1 = g.append('g').attr('stroke', '#999').attr('stroke-opacity', 0.6).selectAll('line').data(links).join('path').attr('fill', 'none').attr('stroke-dasharray', function (d) {
+      return d.ontology === 'protege' ? '2,5,3' : '';
+    }).attr('key', function (d) {
+      return d.type;
+    });
+    var node = g.append('g').attr('stroke', '#fff').attr('stroke-width', nodeStroke).selectAll('circle').data(nodes).join('circle').attr('r', function (d) {
+      return d.type === 'mainNode' ? mainNodeRadius : nodeRadius;
+    }).attr('fill', function (d) {
+      return color(d.type);
+    }).attr('key', function (d) {
+      return d.type;
+    }).attr('class', function (d) {
+      return "node node-".concat(d.id, " ").concat(d.type && d.type === 'organization' ? 'org' : d.type === 'person' ? 'person' : d.type === 'publication' ? 'publication' : d.type === 'mainNode' ? 'mainNode' : d.type === 'article' ? 'article' : d.type === 'keyword' ? 'keyword' : d.type === 'event' ? 'event' : '');
+    }).on('click', function (d) {
+      return d.hasClick ? handleClickNodeGoto({
+        name: d.name,
+        id: d.id,
+        type: d.type
+      }) : null;
+    }).call(drag$1(simulation$1));
+    node.append('title').text(function (d) {
+      return "".concat(d.name, "-").concat(translateType(d.type));
+    });
+    var nodeLabel = g.append('g').selectAll('text').data(nodes).join('text').attr('fill', fontColor).attr('text-anchor', 'middle').attr('key', function (d) {
+      return d.type;
+    }).style('color', '#fff').style('font-size', '14px').text(function (d) {
+      return d.name;
+    });
+    var edgepaths = g.selectAll('.edgepath').data(links).enter().append('path').attr('class', 'edgepath').attr('fill-opacity', 0).attr('stroke-opacity', 0).attr('id', function (d, i) {
+      return "edgepath".concat(i);
+    }).style('pointer-events', 'none');
+    var edgelabels = g.selectAll('.edgelabel').data(links).enter().append('text').style('pointer-events', 'none').attr('class', 'edgelabel').attr('font-size', edgeLabelSize).attr('fill', '#aaa').attr('visibility', 'visible').attr('key', function (d) {
+      return d.type;
+    }).attr('id', function (d, i) {
+      return "edgelabel".concat(i);
+    });
+    edgelabels.append('textPath').attr('xlink:href', function (d, i) {
+      return "#edgepath".concat(i);
+    }).style('text-anchor', 'middle').style('pointer-events', 'none').attr('startOffset', '50%').text(function (d) {
+      return d.property;
+    });
+    simulation$1.on('tick', function () {
+      nodes.forEach(function (d) {
+        // x軸 超過寬度380，回彈到380座標軸區域位置。 ——作用爲：超出範圍的回彈到視圖寬度範圍內
+        if (d.x >= contentWidth - 20) {
+          d.x = contentWidth - 20;
+        }
+        // y軸 超過高度280，回彈到280座標軸區域位置。 ——作用爲：超出範圍的回彈到視圖高度範圍內
+        if (d.y >= contentHeight - 20) {
+          d.y = contentHeight - 20;
+        }
+        if (d.x <= 20) {
+          d.x = 20;
+        }
+        if (d.y <= 20) {
+          d.y = 20;
+        }
+      });
+      link$1.attr('d', function (d) {
+        return getLineCurve(d.source, d.target, lineRaduis);
+      });
+      node.attr('cx', function (d) {
+        return d.x;
+      }).attr('cy', function (d) {
+        return d.y;
+      });
+      nodeLabel.attr('x', function (d) {
+        return d.x;
+      }).attr('y', function (d) {
+        return d.y - nodeRadius;
+      });
+      edgepaths.attr('d', function (d) {
+        return getLineCurve(d.source, d.target, lineRaduis);
+      });
+    });
+  };
+  var renderSNA = function renderSNA() {
+    if (SNAData && SNAData.nodes && SNAData.nodes.length > 0) {
+      var div = document.getElementById('sna-graph');
+      if (div && div.childNodes[0]) {
+        div.removeChild(div.childNodes[0]);
+      }
+      init(SNAData);
+    }
+  };
+
+  // 資料異動或全螢幕切換，重新渲染網絡圖
+  useEffect(function () {
+    renderSNA();
+  }, [SNAData]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('SNA', {
+      'SNA--smallSize': distance < 200
+    }, className),
+    style: {
+      contentWidth: contentWidth,
+      contentHeight: contentHeight,
+      backgroundColor: backgroundColor
+    }
+  }, /*#__PURE__*/React__default.createElement(ExtraTools, {
+    intl: intl,
+    data: SNAData,
+    iconColor: iconColor,
+    domToImageId: "sna-graph",
+    FontSizeTargets: ['#sna-graph svg g text'],
+    exclude: exclude,
+    DownloadExcel: DownloadExcel,
+    fullscreenDomId: "sna-graph"
+  }), /*#__PURE__*/React__default.createElement(ResetBtn, {
+    renderSNA: renderSNA
+  }), /*#__PURE__*/React__default.createElement("div", {
+    id: "sna-graph"
+  }));
+};
+SNA.defaultProps = {
+  className: undefined,
+  intl: undefined,
+  width: 1050,
+  height: 600,
+  distance: 400,
+  SNAData: null,
+  fontColor: '#000000',
+  backgroundColor: '#FFFFFF',
+  iconColor: '#825c0d',
+  exclude: ['downloadXls', 'downloadTsv'],
+  handleClickNodeGoto: null,
+  DownloadExcel: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+SNA.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 語言 */
+  intl: PropTypes.objectOf(PropTypes.any),
+  /** 寬度 */
+  width: PropTypes.number,
+  /** 高度 */
+  height: PropTypes.number,
+  /** 點跟點之間的距離 */
+  distance: PropTypes.number,
+  /** 資料 */
+  SNAData: PropTypes.objectOf(PropTypes.any),
+  /** 網絡圖文字顏色 */
+  fontColor: PropTypes.string,
+  /** 網絡圖背景顏色 */
+  backgroundColor: PropTypes.string,
+  /** icon顏色 */
+  iconColor: PropTypes.string,
+  /** 不顯示的按鈕 ['share', 'downloadImage', 'downloadTsv', 'downloadXls', 'fullscreen', 'fontSizeChanger'] */
+  exclude: PropTypes.arrayOf(PropTypes.string),
+  /** 按下點後要轉址的功能 */
+  handleClickNodeGoto: PropTypes.func,
+  /** Download元件, 由外部傳入的原因是需要環境設定 */
+  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+
+export { SNA as default };