点位显示id

src/App.vue

@@ -252,6 +252,8 @@ let svgNode = null
 let gNode = null
 let zoomObj = null
 let brushObj = null
+let activeRect = null
+let activeRectNeighbourList = []
 
 // d3选择框位置
 let brushLeftPx = 0
@@ -365,6 +367,18 @@ export default {
     brushObj = d3.brush().on("end", (e) => {
       brushed(e)
     })
+
+    
+    svgNode.on('click', function(e, d) {
+      activeRect && activeRect.attr('fill', (d) => {
+        return activeRect.attr('initial-fill')
+      })
+      for (const neib of activeRectNeighbourList) {
+        neib.attr('fill', (d) => {
+          return neib.attr('initial-fill')
+        })
+      }
+    })
   },
   methods: {
     getInputPathLength(input) {
@@ -443,6 +457,7 @@ export default {
 
       resetGlobalVars()
       gNode.selectAll('rect').remove()
+      gNode.selectAll('text').remove()
       gNode.selectAll('circle').remove()
       
 
@@ -514,6 +529,9 @@ export default {
       }
 
       gNode.selectAll('rect').data(wholeDataForRender).enter().append('rect')
+        .attr('raw-id', (d) => {
+          return d[d.length - 1]
+        })
         .attr('x', (d) => d[0] - pointDistance * pxPerUnitLength / 2)
         .attr('y', (d) => d[1] - pointDistance * pxPerUnitLength / 2)
         .attr('width', pointDistance * pxPerUnitLength)
@@ -521,22 +539,76 @@ export default {
         .attr('fill', (d) => {
           return `rgba(${Math.round((d[2] -zMin) / zLength * 255)}, 0, 0, ${d[3] ? '0.7' : '1'})`
         })
-        .attr('render-data', (d) => {
-          return d
-        })
-
-      gNode.selectAll('rect').on('mouseover', function(e) {
-        d3.select(this).attr('fill', 'orange')
-        let renderDataItem = e.target.attributes['render-data'].value
-        let renderDataItemArray = renderDataItem.split(',')
-        that.infoText = renderDataItem.match(/^[^{]+(\{.+\})[^}]+$/)[1]
-      }).on('mouseleave', function (e) {
-        d3.select(this).attr('fill', (d) => {
+        .attr('initial-fill', (d) => {
           return `rgba(${Math.round((d[2] -zMin) / zLength * 255)}, 0, 0, ${d[3] ? '0.7' : '1'})`
         })
+        .attr('raw-data', (d) => {
+          return d[4]
+        })
+
+      gNode.selectAll('text').data(wholeDataForRender).enter().append('text')
+      .attr('x', (d) => d[0])
+      .attr('y', (d) => d[1])
+      .attr('font-size', d => pointDistance * pxPerUnitLength / d.length)
+      .attr("text-anchor", "middle")
+      .attr("dominant-baseline", "middle")
+      .attr("fill", "white")
+      .attr('pointer-events', 'none')
+      .text((d) => {
+        return d[d.length - 1]
+      })
+
+        
+      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) => {
+          return id === item.datum()[item.datum().length - 1]
+        })) {
+          d3.select(this).attr('fill', 'orange')
+        }
+        that.infoText = e.target.attributes['raw-data'].value
+      }).on('mouseleave', function (e, d) {
+        const id = d[d.length - 1]
+        if (id !== activeRect?.datum()[activeRect?.datum().length - 1] && !activeRectNeighbourList?.some((item) => {
+          return id === item.datum()[item.datum().length - 1]
+        })) {
+          d3.select(this).attr('fill', d3.select(this).attr('initial-fill'))
+        }
         that.infoText = ''
       })
 
+      gNode.selectAll('rect').on('click', function(e, d) {
+        e.stopPropagation()
+
+        // console.log(d)
+        const id = d[d.length - 1]
+
+        activeRect && activeRect.attr('fill', (d) => {
+          return activeRect.attr('initial-fill')
+        })
+        for (const neib of activeRectNeighbourList) {
+          neib.attr('fill', (d) => {
+            return neib.attr('initial-fill')
+          })
+        }
+
+        activeRect = d3.select(this)
+        activeRect.attr('fill', d => {
+          return 'rgba(0, 0, 255, 1)'
+        })
+        activeRectNeighbourList = []
+        for (const neibId of rawWholeData[id - 1].ids) {
+          if (neibId === '-1') {
+            continue
+          }
+          const neibNode = gNode.select(`rect[raw-id='${neibId}']`)
+          neibNode.attr('fill', (d) => {
+            return 'rgba(0, 0, 128, 1)'
+          })
+          activeRectNeighbourList.push(neibNode)
+        }
+      })
+
       gNode.selectAll('rect').on('dblclick', function(e, d) {
         // console.log(d)
         const id = d[d.length - 1]
@@ -756,6 +828,7 @@ export default {
         rawWholeData = deepClone(this.rawWholeDataHistory.history[this.rawWholeDataHistory.currentIdx])
         
         gNode.selectAll('rect').remove()
+        gNode.selectAll('text').remove()
         this.renderWholePoints()
       }
     },
@@ -1090,6 +1163,7 @@ export default {
 
       // 渲染
       gNode.selectAll('rect').remove()
+      gNode.selectAll('text').remove()
       this.renderWholePoints()
 
       // 存入历史记录