[SPARK-54320][UI] Fix Job DAG overlapping

### What changes were proposed in this pull request?
Fix the Job DAG overlapping

### Why are the changes needed?

A job with multiple stages might generate SVGs with overlapping
### Does this PR introduce _any_ user-facing change?
no

### How was this patch tested?
<img width="2956" height="1306" alt="image" src="https://github.com/user-attachments/assets/9ccfdc22-fa8d-4c9a-a8f2-5758b5382e08" />

### Was this patch authored or co-authored using generative AI tooling?
no

Closes #53015 from yaooqinn/SPARK-54320.

Authored-by: Kent Yao <yao@apache.org>
Signed-off-by: Dongjoon Hyun <dongjoon@apache.org>
(cherry picked from commit 1a802e3)
Signed-off-by: Dongjoon Hyun <dongjoon@apache.org>

Author: yaooqinn

core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js

@@ -295,6 +295,20 @@ function renderDagVizForJob(svgContainer) {
         .append("g")
     }
 
+    // Now we need to shift the container for this stage so it doesn't overlap with
+    // existing ones, taking into account the position and width of the last stage's
+    // container. We do not need to do this for the first stage of this job.
+    if (i > 0) {
+      const lastStage = svgContainer.selectAll("g.cluster.stage")
+        .filter((d, i, nodes) => i === nodes.length - 1);
+      if (lastStage) {
+        const lastStageWidth = toFloat(lastStage.select("rect").attr("width"));
+        const lastStagePosition = getAbsolutePosition(lastStage);
+        const offset = lastStagePosition.x + lastStageWidth + VizConstants.stageSep;
+        container.attr("transform", `translate(${offset}, 0)`);
+      }
+    }
+
     var g = graphlibDot.read(dot);
     // Actually render the stage
     renderDot(g, container, true);
@@ -312,20 +326,6 @@ function renderDagVizForJob(svgContainer) {
       .attr("rx", "4")
       .attr("ry", "4");
 
-    // Now we need to shift the container for this stage so it doesn't overlap with
-    // existing ones, taking into account the position and width of the last stage's
-    // container. We do not need to do this for the first stage of this job.
-    if (i > 0) {
-      var existingStages = svgContainer.selectAll("g.cluster.stage").nodes();
-      if (existingStages.length > 0) {
-        var lastStage = d3.select(existingStages.pop());
-        var lastStageWidth = toFloat(lastStage.select("rect").attr("width"));
-        var lastStagePosition = getAbsolutePosition(lastStage);
-        var offset = lastStagePosition.x + lastStageWidth + VizConstants.stageSep;
-        container.attr("transform", "translate(" + offset + ", 0)");
-      }
-    }
-
     // If there are any incoming edges into this graph, keep track of them to render
     // them separately later. Note that we cannot draw them now because we need to
     // put these edges in a separate container that is on top of all stage graphs.