fix

src/views/dashboard/related/trace/components/D3Graph/Index.vue

@@ -411,27 +411,11 @@ limitations under the License. -->
     fill-opacity: 0;
   }
 
-  .trace-node-container {
-    fill: rgb(0 0 0 / 0%);
-    stroke-width: 5px;
-    cursor: pointer;
-
-    &:hover {
-      fill: rgb(0 0 0 / 5%);
-    }
-  }
-
   .trace-node .node-text {
     font: 12px sans-serif;
     pointer-events: none;
   }
 
-  .dialog-c-text {
-    white-space: pre;
-    overflow: auto;
-    font-family: monospace;
-  }
-
   .trace-node.highlighted .node-text {
     font-weight: bold;
     fill: #409eff;

src/views/dashboard/related/trace/components/List.vue

@@ -96,6 +96,7 @@ limitations under the License. -->
 
   .list {
     height: calc(100% - 150px);
+    position: relative;
   }
 
   .event-tag {

src/views/dashboard/related/trace/components/Table/Index.vue

@@ -89,12 +89,6 @@ limitations under the License. -->
   );
 </script>
 <style lang="scss" scoped>
-  .dialog-c-text {
-    white-space: pre;
-    overflow: auto;
-    font-family: monospace;
-  }
-
   .trace-tips {
     width: 100%;
     text-align: center;

src/views/dashboard/related/trace/utils/d3-trace-list.ts

@@ -165,10 +165,14 @@ export default class ListGraph {
           return;
         }
         d3.select(this).classed("highlighted", true);
+        const nodeBox = this.getBoundingClientRect();
+        const svgBox = (d3.select(`.${t.el?.className} .trace-list`) as any).node().getBoundingClientRect();
+        const offsetX = nodeBox.x - svgBox.x;
+        const offsetY = nodeBox.y - svgBox.y;
         d3.select("#trace-action-box")
           .style("display", "block")
-          .style("left", `${event.pageX}px`)
-          .style("top", `${event.pageY}px`);
+          .style("left", `${offsetX + 30}px`)
+          .style("top", `${offsetY + 30}px`);
         t.selectedNode = d3.select(this);
         if (t.handleSelectSpan) {
           t.handleSelectSpan(d);