merge 节点同时固定位置,且展开菜单的节点也位置固定

src/util/useD3.js

@@ -83,9 +83,9 @@ const defaultConfig = {
   isHighLight: true, // 是否启动 鼠标 hover 到节点上高亮与节点有关的节点，其他无关节点透明的功能
   isScale: true, // 是否启用缩放平移zoom功能
   scaleExtent: [0.6, 1.5], // 缩放的比例尺
-  chargeStrength: -100, // 万有引力
+  chargeStrength: -300, // 万有引力
   collide: 80, // 碰撞力的大小 （节点之间的间距）
-  alphaDecay: 0.4, // 控制力学模拟衰减率
+  alphaDecay: 0.1, // 控制力学模拟衰减率
   r: 36, // 圈圈的半径 [30 - 45]
   nodeColor: 'skyblue', // 圈圈节点背景颜色
   fontColor: '#2c3e50', // 圈圈内文字的颜色
@@ -208,8 +208,8 @@ export default class RelationGraph {
 
   initLinks() {
     const self = this
-    this.edges && this.edges.remove()
     // 5.关系图添加线
+    this.edges && this.edges.remove()
     // 5.1  每条线是个容器，有线 和一个装文字的容器
     this.edges = this.relMap_g
       .selectAll('g.edge')
@@ -270,19 +270,24 @@ export default class RelationGraph {
       .text((d) => d.name)
   }
 
-  initCircles() {
+  initCircles(circleWrapper) {
     const self = this
-    this.circlesWrapper && this.circlesWrapper.remove()
 
     // 给圈圈节点添加g便于后面添加menu
-    this.circlesWrapper = this.relMap_g
-      .selectAll('g.circle-wrapper')
-      .data(this.config.nodes)
-      .enter()
-      .append('g')
-      .attr('class', 'circle-wrapper')
+    if (circleWrapper) {
+      this.circlesWrapper = circleWrapper
+    } else {
+      this.circlesWrapper = this.relMap_g
+        .selectAll('g.circle-wrapper')
+        .data(this.config.nodes)
+        .enter()
+        .append('g')
+        .attr('class', 'circle-wrapper')
+        .raise()
+    }
 
     // 6.关系图添加用于显示圈圈的节点
+    this.circles && this.circles.remove()
     this.circles = this.circlesWrapper
       .append('circle')
       .attr('r', this.config.r)
@@ -318,9 +323,9 @@ export default class RelationGraph {
       .on('click', function (e, d) {
         // self.tooltip.style('opacity', 0)
         if (menu && menu.curNodeData == d) {
-          self.closeMenu()
+          self.closeMenu(true)
         } else {
-          self.closeMenu()
+          self.closeMenu(true)
           if (d.nodeLabel === 'Subject') {
             self.openMenu(this, d)
           } else {
@@ -360,8 +365,8 @@ export default class RelationGraph {
           .on('end', (e, d) => {
             // 让alpha目标值值恢复为默认值0,停止力模型
             if (!e.active) this.simulation.alphaTarget(0)
-            d.fx = null
-            d.fy = null
+            d.fx = e.x
+            d.fy = e.y
           })
       )
 
@@ -377,7 +382,7 @@ export default class RelationGraph {
       // simulation.force(name,[force])函数，添加某种力
       .force('link', d3.forceLink(this.config.links))
       // 万有引力
-      .force('charge', d3.forceManyBody().strength(this.config.chargeStrength))
+      // .force('charge', d3.forceManyBody().strength(this.config.chargeStrength))
       // d3.forceCenter()用指定的x坐标和y坐标创建一个新的居中力。
       .force(
         'center',
@@ -387,7 +392,7 @@ export default class RelationGraph {
       // 设置迭代次数，默认为1，迭代次数越多最终的布局效果越好，但是计算复杂度更高
       .force(
         'collide',
-        d3.forceCollide(this.config.collide).strength(0.2).iterations(5)
+        d3.forceCollide(this.config.collide).strength(0.1).iterations(10)
       )
       // 在计时器的每一帧中，仿真的alpha系数会不断削减,当alpha到达一个系数时，仿真将会停止，也就是alpha的目标系数alphaTarget，该值区间为[0,1]. 默认为0，
       // 控制力学模拟衰减率，[0-1] ,设为0则不停止 ， 默认0.0228，直到0.001
@@ -407,30 +412,32 @@ export default class RelationGraph {
 
     this.initLinks()
 
-    this.initCircles()
-    const { x = this.config.width / 2, y = this.config.height / 2 } =
-      this.curActiveNode || {}
+    const updateNodes = this.relMap_g
+      .selectAll('g.circle-wrapper')
+      .data(this.config.nodes)
+    updateNodes.exit().remove()
+    this.initCircles(
+      updateNodes
+        .enter()
+        .append('g')
+        .attr('class', 'circle-wrapper')
+        .merge(updateNodes)
+        .raise()
+    )
+
     this.simulation
       .nodes(this.config.nodes)
       .force('link', d3.forceLink(this.config.links))
       .force('charge', null)
-      .force('center', d3.forceCenter(x, y))
-      .alpha(1)
+      .alpha(0.1)
       .restart()
-
-    this.simulation.alphaTarget(0.3).restart()
-    this.curActiveNode.fx = this.curActiveNode.x
-    this.curActiveNode.fy = this.curActiveNode.y
-
-    const timer = setTimeout(() => {
-      this.simulation.alphaTarget(0)
-      this.simulation.force('link', null)
-      clearTimeout(timer)
-    }, 2000)
   }
 
   openMenu(self, d, types) {
+    this.clearFixedPosition()
     this.setCurNode(d)
+    d.fx = d.x
+    d.fy = d.y
     this.curActiveNode = d
     menu = new RadialMenu().radius(38).thickness(30).appendTo(self.parentNode)
     if (!types) {
@@ -442,8 +449,12 @@ export default class RelationGraph {
       )
     }
   }
-
-  closeMenu() {
+  clearFixedPosition() {
+    this.curActiveNode && (this.curActiveNode.fx = null)
+    this.curActiveNode && (this.curActiveNode.fy = null)
+  }
+  closeMenu(needClearFixedPosition) {
+    needClearFixedPosition && this.clearFixedPosition()
     if (menu) {
       menu.hide()
       menu = null
@@ -466,8 +477,8 @@ export default class RelationGraph {
             }
           })
       )
-      .on('click', () => this.closeMenu())
       .on('dblclick.zoom', null) // 取消双击放大
+      .on('click', () => this.closeMenu())
 
     // 3.defs  <defs>标签的内容不会显示，只有调用的时候才显示
     this.defs = this.SVG.append('defs')