image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>svg力导向图动画-可以修改小球数量</title>
    8.     <style>
    9.         svg {
    10.             border: 1px solid #eee;
    11.         }
    12.     </style>
    13. </head>
    14. <body>
    16.     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-400 -400 800 800" width="800" height="800">
    17.         <path id="links" fill="none" stroke="#eeeeee" />
    18.         <text id="text" fill="white"></text>
    19.     </svg>
    21.     <script>
    22.         //辅助类 Vector: 向量==矢量，有方向的标量;
    23.         (function () {
    24.             function Vector(x, y) {
    25.                 this.x = x || 0;
    26.                 this.y = y || 0;
    27.             }
    29.             Vector.prototype = {
    30.                 constructor: Vector,
    31.                 square: function () {
    32.                     return this.x ** 2 + this.y ** 2;
    33.                 },
    34.                 length: function () {
    35.                     return Math.sqrt(this.square());
    36.                 },
    37.                 add: function (q) {
    38.                     return new Vector(this.x + q.x, this.y + q.y)
    39.                 },
    40.                 minus: function (q) {
    41.                     return new Vector(this.x - q.x, this.y - q.y)
    42.                 },
    43.                 multiply: function (scale) {
    44.                     return new Vector(this.x * scale, this.y * scale)
    45.                 },
    47.                 //标准化: 乘以一个方向向量，相当于length在某向量上的投影
    48.                 normalize: function (length) {
    49.                     if (length == undefined) {
    50.                         length = 1;
    51.                     }
    52.                     return this.multiply(length / this.length());
    53.                 }
    54.             };
    55.             Vector.fromPoints = function (p1, p2) { //函数可以有自己的方法
    56.                 return new Vector(p2.x - p1.x, p2.y - p1.y);
    57.             };
    58.             window.Vector = Vector;
    59.         })();
    60.         //end of Vector
    63.         // 力导图: 近乎弹簧的互作，近排斥，远吸引;
    64.         var XML_NS = "http://www.w3.org/2000/svg";
    66.         var k = 0.1; //弹性系数，弹簧变形的距离和力之间的系数 F=k*delta; 尝试0.05比较好
    68.         //建立点，简化为等质量的点，可以人一多个点
    69.         //todo map()函数
    70.         var points = "a,b,c,d,e,f,g,h".split(",").map(function (name, index, arr) {
    71.             return {
    72.                 name: name,
    73.                 color: 'hsl(' + (360 / arr.length * index) + ', 100%, 60%)',
    74.             }
    75.         });
    77.         var relation = 300; //互作为0的距离;
    79.         var svg = document.querySelector('svg'), text = document.querySelector('text');
    81.         var Vector = window.Vector;
    82.         function random(min, max) {
    83.             return Math.round(min + (max - min) * Math.random());
    84.         }
    86.         // todo forEach()函数
    87.         points.forEach(function (point) {
    88.             //console.log(point) //{name: "a", color: "hsl(0, 100%, 60%)"}
    89.             var circle = document.createElementNS(XML_NS, 'circle'); //这个namespace写错是不能显示的！
    90.             //init position
    91.             var x = random(-300, 300), y = random(-300, 300); //调整到屏幕中心区域
    92.             circle.setAttribute('cx', x);
    93.             circle.setAttribute('cy', y);
    94.             circle.setAttribute('r', "10");
    95.             circle.setAttribute('fill', point.color);
    97.             //绑定
    98.             point.circle = circle;
    99.             point.s = new Vector(x, y);//初始化位移
    100.             point.v = new Vector();//初始没有速度
    101.             point.a = new Vector();//初始没有加速度
    103.             //加入到dom
    104.             svg.appendChild(circle);
    105.         });
    107.         //获取上一帧的时间
    108.         var lastFrameTime = +new Date();
    109.         //更新当前帧
    110.         var w = 0
    112.         var links = document.getElementById('links');
    113.         function update() {
    114.             var frameTime = +new Date();//拿到当前帧的时间
    115.             var t = frameTime - lastFrameTime;//两帧时间差
    116.             //animation begin
    118.             //对时间差(单位是ms)进行缩放，
    119.             t /= 100; //缩放到1/5s为单位; 物理学单位是m，屏幕单位是px，尝试出来的换算关系;
    121.             //更新点的位移、速度、加速度、力等
    122.             points.forEach(function (pa) {
    123.                 //console.log(pa)
    124.                 var f = new Vector(); //定义一个空矢量，表示力
    126.                 //1.计算合力
    127.                 points.forEach(function (pb) {
    128.                     //两两互作，排除掉自己和自己
    129.                     if (pa.name == pb.name) return;
    130.                     //console.log(w,'两两',pa.name, pb.name)
    132.                     var x = Vector.fromPoints(pa.s, pb.s);//点之间的距离
    133.                     var delta = x.length() - relation;//自然长度之外的 弹性变量
    135.                     //求合力 f=k*x
    136.                     f = f.add(x.normalize(delta * k)); //在x方向上，力(delta*k) 的投影的长度
    138.                 });
    140.                 //2.计算加速度 a=F/m; 简化质量都是m=1
    141.                 pa.a = f;
    143.                 //3. 计算速度 vt=v0+a*t;
    144.                 //如果没有能量损耗，系统将会一直运动下去。此处假设速度每次损耗2%，设置为0.98
    145.                 pa.v = pa.v.add(pa.a.multiply(t)).multiply(0.98); //bug: 0.999时停止的慢，但是全部小球的质心不固定!
    147.                 //4. 计算位置 st=s0+v*t
    148.                 pa.s = pa.s.add(pa.v.multiply(t));
    150.                 //设置到dom上
    151.                 pa.circle.setAttribute('cx', pa.s.x);
    152.                 pa.circle.setAttribute('cy', pa.s.y);
    154.             });
    155.             //前面计算
    157.             //接着，根据计算结果，更新画面
    158.             render();
    160.             //for debug only;
    161.             w += 1;
    162.             if (w % 100 == 0) {
    163.                 console.log(' >>> steps=', w);
    164.             }
    165.             //2000步差不多正好，可以停止了，
    166.             //也可以设置其他停止条件，比如全部小球的变动小于某个值的时候，需要记录上一个小球的位置
    167.             if (w > 2000) {
    168.                 return;
    169.             }
    171.             //animation end
    172.             lastFrameTime = frameTime;//当前帧的时间已经成历史
    173.             window.requestAnimationFrame(update);//更新画面
    174.         }
    176.         //渲染
    177.         function render() {
    178.             //画点和点之间的连线
    179.             var linkPath = [];
    180.             points.forEach(function (pa) {
    181.                 var sa = pa.s;
    182.                 points.forEach(function (pb) {
    183.                     if (pa.name == pb.name) return;
    184.                     var sb = pb.s;
    186.                     linkPath = linkPath.concat([
    187.                         "M", sa.x, sa.y,
    188.                         'L', sb.x, sb.y,
    189.                     ]);
    190.                 });
    191.             });
    192.             //绘制连线
    193.             links.setAttribute('d', linkPath.join(' '));
    195.             //为小球添加文字
    196.             text.innerHTML = "";
    197.             function n2str(n) {
    198.                 return new String(n);
    199.             }
    200.             points.forEach(function (p) {
    201.                 var tspan = document.createElementNS(XML_NS, 'tspan');
    202.                 tspan.setAttribute('x', n2str(p.s.x - 5))
    203.                 tspan.setAttribute('y', n2str(p.s.y + 5))
    204.                 tspan.innerHTML = p.name;
    206.                 text.appendChild(tspan);
    207.             });
    208.             svg.append(text);//重新把文字放到最后，也就是顶层
    209.         }
    210.         window.requestAnimationFrame(update);
    211.     </script>
    212. </body>
    213. </html>