bug fix: 刚刚active过的点位无法hover高亮

src/App.vue

@@ -253,8 +253,8 @@ let svgNode = null
 let gNode = null
 let zoomObj = null
 let brushObj = null
-let activeRect = null
-let activeRectNeighbourList = []
+let activeRectSelection = null
+let activeRectNeighboursSelection = []
 
 // d3选择框位置
 let brushLeftPx = 0
@@ -371,15 +371,17 @@ export default {
 
     
     svgNode.on('click', function(e, d) {
-      activeRect && activeRect.attr('fill', (d) => {
-        return activeRect.attr('initial-fill')
+      activeRectSelection && activeRectSelection.attr('fill', (d) => {
+        return activeRectSelection.attr('initial-fill')
       })
-      for (const neib of activeRectNeighbourList) {
+      for (const neib of activeRectNeighboursSelection) {
         neib.attr('fill', (d) => {
           return neib.attr('initial-fill')
         })
       }
       gNode.selectAll('text').remove()
+      activeRectSelection = null
+      activeRectNeighboursSelection = []
     })
   },
   methods: {
@@ -547,7 +549,7 @@ export default {
 
       gNode.selectAll('rect').on('mouseenter', function(e, d) {
         const id = d[d.length - 1]
-        if (id !== activeRect?.datum()[activeRect?.datum().length - 1] && !activeRectNeighbourList?.some((item) => {
+        if (id !== activeRectSelection?.datum()[activeRectSelection?.datum().length - 1] && !activeRectNeighboursSelection?.some((item) => {
           return id === item.datum()[item.datum().length - 1]
         })) {
           d3.select(this).attr('fill', 'orange')
@@ -555,7 +557,7 @@ export default {
         that.infoText = d[4]
       }).on('mouseleave', function (e, d) {
         const id = d[d.length - 1]
-        if (id !== activeRect?.datum()[activeRect?.datum().length - 1] && !activeRectNeighbourList?.some((item) => {
+        if (id !== activeRectSelection?.datum()[activeRectSelection?.datum().length - 1] && !activeRectNeighboursSelection?.some((item) => {
           return id === item.datum()[item.datum().length - 1]
         })) {
           d3.select(this).attr('fill', d3.select(this).attr('initial-fill'))
@@ -569,20 +571,20 @@ export default {
         // console.log(d)
         const id = d[d.length - 1]
 
-        activeRect && activeRect.attr('fill', (d) => {
-          return activeRect.attr('initial-fill')
+        activeRectSelection && activeRectSelection.attr('fill', (d) => {
+          return activeRectSelection.attr('initial-fill')
         })
-        for (const neib of activeRectNeighbourList) {
+        for (const neib of activeRectNeighboursSelection) {
           neib.attr('fill', (d) => {
             return neib.attr('initial-fill')
           })
         }
 
-        activeRect = d3.select(this)
-        activeRect.attr('fill', d => {
+        activeRectSelection = d3.select(this)
+        activeRectSelection.attr('fill', d => {
           return 'rgba(0, 0, 255, 1)'
         })
-        activeRectNeighbourList = []
+        activeRectNeighboursSelection = []
         for (const neibId of rawWholeData[id - 1].ids) {
           if (neibId === '-1') {
             continue
@@ -591,7 +593,7 @@ export default {
           neibNode.attr('fill', (d) => {
             return 'rgba(0, 0, 128, 1)'
           })
-          activeRectNeighbourList.push(neibNode)
+          activeRectNeighboursSelection.push(neibNode)
         }
 
         gNode.selectAll('text').remove()