手把手教你从0手写一个力导向关系图

  下图，是本次要讲的项目动态实例：

创新互联公司专注于企业营销型网站建设、网站重做改版、宾川网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站制作、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为宾川等各大城市提供网站开发制作服务。

前言

力导向图大家都不陌生，力导向图缺少不了力，而在数据量很大的情况下初始化节点以及对节点进行拖动时会导致整个力导图都在一直在动，密集的情况会更加严重，并且本着可以对点更好，灵活的控制，满足不同的需求，所以打算自己实现一个简单的力导向图，并在过程中对碰撞检测进行一次探索。

内容包括

整体内容分为两个部分

使用d3.js 开发力导向图出现的问题

  1. 两点之间多条边的处理

  2. 点的框选

  3. 点的删除

  4. 缩略图

  5. 主图的拖拽、缩放与缩略图

自己实现一个简单的拓扑图

  1. 碰撞检测

  2. 矩形与矩形的检测

  3. 圆形与圆形

  4. 圆形与矩形

  5. 点的分配

  6. 碰撞后点的移动

  7. 拖动

一 使用d3.js 开发力导向图出现的问题

两点之间多条边的处理

思路为 ，将两点之间的线进行分组，中间，左右分别为三组，分好组后，当tick 进行渲染时,通过分组内容的数量,对分组内容改变path 的弯曲程度。

点的框选

拖拽中创建一个矩形框，拖拽后判断中心点是否在矩形框中则为被框选中. 注: 位置需要与d3 缩放的scale 配合计算

删除

点的删除实际上 就是把 相关点与线全部删除， 并且清空画布后， 重新用删除后的数据重新绘制。

缩略图

缩略图目前的逻辑是主图的最大倍数作为背景，主图的宽高作为缩略图视野(蓝框)的宽高。因为缩略图的dom 的宽高是css 定死的,viewbox 是实际宽高，所以给定主图(正常)的宽高 会自动缩放。在拖拽主图的点与相应操作时，对缩略图的点也进行相应的变动，实际上就是在缩略图中又画了一遍主图的内容 

  
 
 
 
    
   
  
  
  
  1. /** 
    2. 
   
  
  
  
  2.       * @params 
    3. 
   
  
  
  
  3.       * width 缩略图宽度 
    4. 
   
  
  
  
  4.       * height 缩略图高度 
    5. 
   
  
  
  
  5.       * mainWidth 主图的宽度 
    6. 
   
  
  
  
  6.       * mainHeight 主图的高度 
    7. 
   
  
  
  
  7.       * zoomMax 最大缩放比例 
    8. 
   
  
  
  
  8.       *  
    9. 
   
  
  
  
  9.       */ 
    10. 
   
  
  
  
  10.       thumbSvg.attr('width', width) 
    11. 
   
  
  
  
  11.          .attr('height', height).attr('viewBox', () => { 
    12. 
   
  
  
  
  12.           // 缩略图的宽高为 主图的 最大缩略比例 
    13. 
   
  
  
  
  13.            w = mainWidth * zoomMax; 
    14. 
   
  
  
  
  14.            h = mainHeight * zoomMax; 
    15. 
   
  
  
  
  15.            // 设置偏移 让背景图移至中心,缩略图与主图的差/ 2 就是需要移动的距离 
    16. 
   
  
  
  
  16.            x = -(w - mainWidth) / 2; 
    17. 
   
  
  
  
  17.            y = -(h - mainHeight) / 2; 
    18. 
   
  
  
  
  18.            return `${x} ${y} ${w} ${h}`; 
    19. 
   
  
  
  
  19.          }); 
    20. 
   
  
  
  
  20.        dragThumb.attr('width', mainWidth) 
    21. 
   
  
  
  
  21.          .attr('height', mainHeight); 
    22.

主图的拖拽、缩放与缩略图

调用主图的缩放时(zoom) 会得到缩放以及拖拽信息，缩略图使用拖拽的信息，因为viewbox 的原因，拖拽信息会自动缩放。但是需要注意主图的缩放会对translate 进行变化 所以需要自己去处理 缩放过程中产生的位移

因为缩放会造成 主图的 translate 发生变化 与手动拖拽造成的translate 会有差 所以 要扣除缩放造成的偏移

  
 
 
 
    
   
  
  
  
  1. /** 
    2. 
   
  
  
  
  2.   * @params 
    3. 
   
  
  
  
  3.   *  innerZoomInfo 缩略图的缩放信息 
    4. 
   
  
  
  
  4.   *  mainTransform 主图的缩放信息 
    5. 
   
  
  
  
  5.   *  mainWidth,mainHeight 主图的宽高 
    6. 
   
  
  
  
  6.   */ 
    7. 
   
  
  
  
  7.      const { 
    8. 
   
  
  
  
  8.        innerZoomInfo, mainWidth, mainHeight, 
    9. 
   
  
  
  
  9.      } = this; 
    10. 
   
  
  
  
  10.      // 如果传入的 缩放值与之前记录的缩放值不一致 则认为发生了缩放 记录发生缩放后偏移值 
    11. 
   
  
  
  
  11.      if (!innerZoomInfo || innerZoomInfo.k !== mainTransform.k) { 
    12. 
   
  
  
  
  12.        this.moveDiff = { 
    13. 
   
  
  
  
  13.          x: (mainWidth - innerZoomInfo.k * mainWidth) / 2, //缩放产生的 位移 
    14. 
   
  
  
  
  14.          y: (mainHeight - innerZoomInfo.k * mainHeight) / 2, 
    15. 
   
  
  
  
  15.        }; 
    16. 
   
  
  
  
  16.      } 
    17. 
   
  
  
  
  17.      const { x: diffX, y: diffY } = this.moveDiff; 
    18. 
   
  
  
  
  18.      const { x, y, k } = mainTransform; // 主图偏移以及缩放数据 
    19. 
   
  
  
  
  19.      this.dragThumb 
    20. 
   
  
  
  
  20.        .attr('width', mainWidth / k) 
    21. 
   
  
  
  
  21.        .attr('height', mainHeight / k) 
    22. 
   
  
  
  
  22.        .attr('transform', () => setTransform({ 
    23. 
   
  
  
  
  23.          x: -((x - diffX) / k), // 这个地方应该不能直接 除 k 这里的x,y 应该是放大后的x,y应该减去缩放的差值 再 除K 
    24. 
   
  
  
  
  24.          y: -((y - diffY) / k), 
    25. 
   
  
  
  
  25.        })); 
    26.

自己实现一个简单的拓扑图

碰撞检测

矩形与矩形的检测

矩形与矩形的碰撞是最好检测的

通过上面的图基本就涵盖了规则矩形相交的情况 图可以得知 A:红色矩形 B:绿色矩形 上下是通过Y,左右是通过X

  
 
 
 
    
   
  
  
  
  1. A.x < B.x + B.width && 
    2. 
   
  
  
  
  2. A.x + A.width > B.x && 
    3. 
   
  
  
  
  3. A.y < B.y + B.h && 
    4. 
   
  
  
  
  4. A.h + A.y > B.y 
    5.

但是如果内部是一个圆形的话，那么如果 紫色的区域则会被判定为碰撞则 则准确性有一定的偏差，需要有圆形的检测

圆形与圆形

圆形与圆形的逻辑也比较简单，就是两点之间的距离小于两点半径之和 则为碰撞 

  
 
 
 
    
   
  
  
  
  1. var a = dot2.x-dot1.x; 
    2. 
   
  
  
  
  2.        var b = dot2.y-dot1.y; 
    3. 
   
  
  
  
  3.        return Math.sqrt(a*a+b*b) < a.radius + b.radius; 
    4.

圆形与矩形

首先来看 矩形与圆形相交是什么样,从图所知矩形与圆形相交，表现为圆点距离矩形最近的点小于圆点半径 则为相交 那么如何得到圆点距离矩形最近的点

从下图就知道了 圆点的延伸是圆点边的一点。crashX = 如果 圆点位于矩形 左侧 矩形(rect).x; 右侧 = rect.x + rect.w 上下 圆点(circle).x

crashY = 如果 圆点位于矩形 左右 circle.y; 上 rect.y 上下 rect.y + h

那么两点有了，可以得出两点之间的距离套用圆与圆的公式 

  
 
 
 
    
   
  
  
  
  1. var a = crash.x-dot1.x; 
    2. 
   
  
  
  
  2.       var b = crash.y-dot1.y; 
    3. 
   
  
  
  
  3.       return Math.sqrt(a*a+b*b) < a.radius; 
    4.

上面就是基本的碰撞逻辑，更复杂的逻辑可以看下面参考文章 [1]

点的分配

点的位置的分配 就是确定中心点后，将关系最多的点作为中心点，其关系点向四周分散，没有关系的同级点，则向中心点四周进行分散，其关系点以确定后位置的点的坐标向周围分散。

根据三角形的正玄、余弦来得值；假设一个圆的圆心坐标是(a,b)，半径为r,角度为d 则圆上每个点的坐标可以通过下面的公式得到

  
 
 
 
    
   
  
  
  
  1. /* 
    2. 
   
  
  
  
  2. * @params 
    3. 
   
  
  
  
  3. * d 角度 
    4. 
   
  
  
  
  4. * r 半径长度 
    5. 
   
  
  
  
  5. */ 
    6. 
   
  
  
  
  6. X = a + Math.cos(((Math.PI * 2) / 360) * d) * r; 
    7. 
   
  
  
  
  7. Y = b + Math.sin(((Math.PI * 2) / 360) * d) * r; 
    8.

角度可以通过 关系边进行得到. d = 360/关系边的数量，确定第一圈点的角度。拿到角度后 ，维持一个所有点坐标的对象，再结合圆形与圆形碰撞检测，我们就可以遍历 获取所有点的坐标了

  
 
 
 
    
   
  
  
  
  1. /* 
    2. 
   
  
  
  
  2. * @params 
    3. 
   
  
  
  
  3. * dotsLocations 所有点的坐标信息 
    4. 
   
  
  
  
  4. */ 
    5. 
   
  
  
  
  5. initNodes() { 
    6. 
   
  
  
  
  6.     const { x: centerX, y: centerY } = this.center; 
    7. 
   
  
  
  
  7.     const { distance } = this; 
    8. 
   
  
  
  
  8.     const getDeg = (all, now) => 360 / (all - (now || 0)); 
    9. 
   
  
  
  
  9.     // 把中心点分配给线最多的点 
    10. 
   
  
  
  
  10.     const centerdot = this.dots[0]; 
    11. 
   
  
  
  
  11.     centerdot.x = centerX; 
    12. 
   
  
  
  
  12.     centerdot.y = centerY; 
    13. 
   
  
  
  
  13.     this.dotsLocations[centerdot.id] = { x: centerX, y: centerY }; 
    14. 
   
  
  
  
  14.     this.dots.forEach((dot) => { 
    15. 
   
  
  
  
  15.       const { x: outx, y: outy } = dot; 
    16. 
   
  
  
  
  16.       if (!outx && !outy) { 
    17. 
   
  
  
  
  17.        // 兄弟点 (无关系的点) 默认以中心店的10度进行遍历 
    18. 
   
  
  
  
  18.         dot = this.getLocation(dot, centerX, centerY,10, distance).dot; 
    19. 
   
  
  
  
  19.       } 
    20. 
   
  
  
  
  20.       const { x: cx, y: cy } = dot; 
    21. 
   
  
  
  
  21.       const dotsLength = dot.relationDots.length; 
    22. 
   
  
  
  
  22.       let { distance: innerDistance } = this; 
    23. 
   
  
  
  
  23.       // 获取剩余点的角度 
    24. 
   
  
  
  
  24.       let addDeg = getDeg(dotsLength); 
    25. 
   
  
  
  
  25.       dot.relationDots.forEach((relationId, index) => { 
    26. 
   
  
  
  
  26.         let relationDot = this.findDot(relationId); 
    27. 
   
  
  
  
  27.         if (!relationDot.x && !relationDot.y) { 
    28. 
   
  
  
  
  28.           const { 
    29. 
   
  
  
  
  29.             dot: resultDot, 
    30. 
   
  
  
  
  30.             isPlus, 
    31. 
   
  
  
  
  31.             outerR, 
    32. 
   
  
  
  
  32.           } = this.getLocation(relationDot, cx, cy, addDeg, innerDistance); 
    33. 
   
  
  
  
  33.           if (isPlus) { 
    34. 
   
  
  
  
  34.            // 如果第一圈遍历完毕，则开始以 半径 * 2 为第二圈开始遍历 
    35. 
   
  
  
  
  35.             innerDistance = outerR; 
    36. 
   
  
  
  
  36.             addDeg = getDeg(dotsLength, index); 
    37. 
   
  
  
  
  37.             addDeg += randomNumber(5, 9);  //防止第一圈与第二圈的点所生成的角度一致 造成链接的线重叠在一起 
    38. 
   
  
  
  
  38.           } 
    39. 
   
  
  
  
  39.           relationDot = resultDot; 
    40. 
   
  
  
  
  40.         } 
    41. 
   
  
  
  
  41.       }); 
    42. 
   
  
  
  
  42.     }); 
    43. 
   
  
  
  
  43.   } 
    44. 
   
  
  
  
  44.  
    45. 
   
  
  
  
  45.    
    46.

 

  
 
 
 
    
   
  
  
  
  1. // 分配位置 
    2. 
   
  
  
  
  2.   getLocation(dot, cx, cy, addDeg, distance) { 
    3. 
   
  
  
  
  3.   // 由第一张图 得知 -90度为最上面  从最上面开始循环 
    4. 
   
  
  
  
  4.     let outerDeg = -90; 
    5. 
   
  
  
  
  5.     let outerR = distance; 
    6. 
   
  
  
  
  6.     const { distance: addDistance } = this; 
    7. 
   
  
  
  
  7.     let firsted; // 用于分布完后一周 
    8. 
   
  
  
  
  8.     while (Object.keys(this.checkDotLocation(dot)).length !== 0) { 
    9. 
   
  
  
  
  9.       outerDeg += addDeg; 
    10. 
   
  
  
  
  10.       if (outerDeg > 360) { 
    11. 
   
  
  
  
  11.       // 转完一圈 随机生成第二圈的角度再开始对当前点进行定位 
    12. 
   
  
  
  
  12.         addDeg = randomNumber(10, 35); 
    13. 
   
  
  
  
  13.         outerDeg = addDeg; 
    14. 
   
  
  
  
  14.         if (firsted) { 
    15. 
   
  
  
  
  15.           outerR += addDistance; 
    16. 
   
  
  
  
  16.         } 
    17. 
   
  
  
  
  17.         firsted = true; 
    18. 
   
  
  
  
  18.       } 
    19. 
   
  
  
  
  19.       const innerLocation = getDegXy(cx, cy, outerDeg, outerR); 
    20. 
   
  
  
  
  20.       dot = Object.assign(dot, innerLocation); 
    21. 
   
  
  
  
  21.     } 
    22. 
   
  
  
  
  22.     this.dotsLocations[dot.id] = { x: dot.x, y: dot.y }; 
    23. 
   
  
  
  
  23.     return { 
    24. 
   
  
  
  
  24.       dot, 
    25. 
   
  
  
  
  25.       isPlus: firsted, 
    26. 
   
  
  
  
  26.       outerR, 
    27. 
   
  
  
  
  27.     }; 
    28. 
   
  
  
  
  28.   } 
    29. 
  
 
 
 


  
 
 
 
    
   
  
  
  
  1.  // 碰撞检测 
    2. 
   
  
  
  
  2.   checkDotLocation(circleA) { 
    3. 
   
  
  
  
  3.     let repeat = false; 
    4. 
   
  
  
  
  4.     if (!circleA.x || !circleA.y) return true; 
    5. 
   
  
  
  
  5.     const { forceCollide } = this; 
    6. 
   
  
  
  
  6.     console.log(this.dotsLocations) 
    7. 
   
  
  
  
  7.     Object.keys(this.dotsLocations).forEach((key) => { 
    8. 
   
  
  
  
  8.       if (key === circleA.id) { 
    9. 
   
  
  
  
  9.         return; 
    10. 
   
  
  
  
  10.       } 
    11. 
   
  
  
  
  11.       const circleB = this.dotsLocations[key]; 
    12. 
   
  
  
  
  12.       let isRepeat = Math.sqrt(Math.pow(circleA.x - circleB.x, 2) + Math.pow(circleA.y - circleB.y, 2)) < forceCollide * 2; 
    13. 
   
  
  
  
  13.       if(isRepeat)repeat = true; 
    14. 
   
  
  
  
  14.     }); 
    15. 
   
  
  
  
  15.     return repeat; 
    16. 
   
  
  
  
  16.   } 
    17. 
   
  
  
  
  17. } 
    18.

生成时间与D3 的差不多

碰撞后点的移动 (力？)

碰撞后的逻辑呢 简单的就是已拖动点为圆点，计算碰撞点与圆点的夹角，再通过角度与距离得出碰撞后被碰撞点的x,y的坐标

  
 
 
 
    
   
  
  
  
  1. changeLocation(data, x, y, eliminate) { 
    2. 
   
  
  
  
  2.  // 先对原来的点进行赋值 
    3. 
   
  
  
  
  3.     data.x = x; 
    4. 
   
  
  
  
  4.     data.y = y; 
    5. 
   
  
  
  
  5.     // 对点的坐标进行赋值，使之后的碰撞使用新值进行计算 
    6. 
   
  
  
  
  6.     this.dotsLocations[data.id] = { x, y }; 
    7. 
   
  
  
  
  7.     let crashDots = this.checkDotLocation(data); 
    8. 
   
  
  
  
  8.     // 获得所有被碰撞的点 
    9. 
   
  
  
  
  9.     Object.keys(crashDots).forEach((crashId) => { 
    10. 
   
  
  
  
  10.       if (eliminate === crashId) return; // 碰撞后的碰撞防止 更改当前拖拽元素 
    11. 
   
  
  
  
  11.       const crashDot = this.findDot(crashId); 
    12. 
   
  
  
  
  12.       // 获取被碰撞的x,y 值 
    13. 
   
  
  
  
  13.       const { x: crashX, y: crashY } = crashDot; 
    14. 
   
  
  
  
  14.       // 此处的角度是要移动的方向的角度 
    15. 
   
  
  
  
  15.       let deg = getDeg(crashDot.x,crashDot.y,data.x,data.y); 
    16. 
   
  
  
  
  16.       // - 180 的目的是为了 与上面的黑图角度一致 
    17. 
   
  
  
  
  17.       // 2是碰撞后  移动2个像素的半径 
    18. 
   
  
  
  
  18.       const {x:endX,y:endY} = getDegXy(crashDot.x, crashDot.y, deg - 180, 2); 
    19. 
   
  
  
  
  19.       // 讲被碰撞的点作为圆点 改变值 并进行碰撞点的碰撞的碰撞检测(禁止套娃 ) 
    20. 
   
  
  
  
  20.       this.changeLocation(crashDot, endX, endY, data.id); 
    21. 
   
  
  
  
  21.     }); 
    22. 
   
  
  
  
  22.   } 
    23.

获取夹角角度

  
 
 
 
    
   
  
  
  
  1. function getDeg(x1,y1,x2,y2){ 
    2. 
   
  
  
  
  2.   //中心点 
    3. 
   
  
  
  
  3.   let cx = x1; 
    4. 
   
  
  
  
  4.   let cy = y1; 
    5. 
   
  
  
  
  5.  
    6. 
   
  
  
  
  6.   //2个点之间的角度获取 
    7. 
   
  
  
  
  7.   let c1 = Math.atan2(y1 - cy, x1 - cx) * 180 / (Math.PI); 
    8. 
   
  
  
  
  8.   let c2 = Math.atan2(y2 - cy, x2 - cx) * 180 / (Math.PI); 
    9. 
   
  
  
  
  9.   let angle; 
    10. 
   
  
  
  
  10.   c1 = c1 <= -90 ? (360 + c1) : c1; 
    11. 
   
  
  
  
  11.   c2 = c2 <= -90 ? (360 + c2) : c2; 
    12. 
   
  
  
  
  12.  
    13. 
   
  
  
  
  13.   //夹角获取 
    14. 
   
  
  
  
  14.   angle = Math.floor(c2 - c1); 
    15. 
   
  
  
  
  15.   angle = angle < 0 ? angle + 360 : angle; 
    16. 
   
  
  
  
  16.   return angle; 
    17. 
   
  
  
  
  17. } 
    18.

到此实现一个简单的拓扑图就搞定了。使用我们自己的force 代替 d3.js 的效果，后期想要什么效果就可以自己再加了 如 拖动主点相关点动，其他关联点不动的需求。tick方法需要自己手动去调用了

  
 
 
 
    
   
  
  
  
  1. let force = new Force({ 
    2. 
   
  
  
  
  2.           x: svgW / 2, 
    3. 
   
  
  
  
  3.           y: svgH / 2, 
    4. 
   
  
  
  
  4.           distance: 200, 
    5. 
   
  
  
  
  5.           forceCollide:30, 
    6. 
   
  
  
  
  6.         }); 
    7. 
   
  
  
  
  7.         force.nodes(dot); 
    8. 
   
  
  
  
  8.         force.initLines(line); 
    9.

拖动

这边的tick 是当 点的xy 发生变化的时候 自己去重新构建点和线。再实际项目中每一次拖动就会构建，会比较卡，可以丢到requestAnimationFrame 去调用 

  
 
 
 
    
   
  
  
  
  1. dotDoms.on("mousedown", function (d) { 
    2. 
   
  
  
  
  2.         dragDom = { 
    3. 
   
  
  
  
  3.           data: d, 
    4. 
   
  
  
  
  4.           dom: this, 
    5. 
   
  
  
  
  5.         }; 
    6. 
   
  
  
  
  6.       }); 
    7. 
   
  
  
  
  7.       d3.select("svg").on("mousemove", function (d) { 
    8. 
   
  
  
  
  8.         if (!dragDom) return; 
    9. 
   
  
  
  
  9.         const { offsetX: x, offsetY: y } = d3.event; 
    10. 
   
  
  
  
  10.         if (x < -1 || y < -1 || x >= svgH - 10 || y >= svgH - 10) { 
    11. 
   
  
  
  
  11.           //边界 
    12. 
   
  
  
  
  12.           dragDom = null; 
    13. 
   
  
  
  
  13.           return; 
    14. 
   
  
  
  
  14.         } 
    15. 
   
  
  
  
  15.         force.changeLocation(dragDom.data, x, y); 
    16. 
   
  
  
  
  16.         tick(); 
    17. 
   
  
  
  
  17.       }); 
    18. 
   
  
  
  
  18.       d3.select("svg").on("mouseup", function (d) { 
    19. 
   
  
  
  
  19.         dragDom = null; 
    20. 
   
  
  
  
  20.       }); 
    21.

小结

本章主要讲述了使用d3 对力导向图进行开发过程中，出现的问题。以及以碰撞为基础开发的简单的力导向图

当前名称：手把手教你从0手写一个力导向关系图
文章来源：http://www.36103.cn/qtweb/news19/9569.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

标签优化知识

分类信息网站

平昌保洁　　 　网站收录　　 　微信服务号订阅号开发　　 　簇桥薇薇新娘　　 　成都关键词SEO优化　　 　成都网站建设　　 　营销型网站　　 　四川成都网站设计　　 　成都展柜定制　　 　手机网站版本　　 　成都标识标牌设计制作　　 　德阳定制网站建设　　 　网站推广　　 　LOGO设计　　 　成都响应式网站建设　　 　成都营销网站建设　　 　网站seo　　 　雅安电信机房　　 　德昌麦琪建站　　 　华泰海航