From f84cfb334ec7ef37b13ce43c5c82194b383626cc Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 29 Sep 2025 10:46:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20base=20=E8=87=AA=E9=80=82=E5=BA=94?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=92=8C=E8=87=AA=E5=8A=A8=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scDegra.vue | 21 +++++++++++++++++----
 src/views/wf/degraD3_2.vue |  1 -
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/scDegra.vue b/src/components/scDegra.vue
index a0972f32..2f501a0e 100644
--- a/src/components/scDegra.vue
+++ b/src/components/scDegra.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="width:100%;height:100%" id="svgContainer">
     <svg id="mySvg"></svg>
   </div>
 </template>
@@ -133,10 +133,23 @@ export default {
       // 渲染图
       this.render(this.inner, this.g);
 
-      // 自动计算 viewBox 尺寸
-      const { width, height } = this.g.graph();
+      // 获取 svg 的宽高
+      const svgWidth = document.getElementById("svgContainer").clientWidth;
+      const svgHeight = document.getElementById("svgContainer").clientHeight;
+
       d3.select("#mySvg")
-        .attr("viewBox", `0 0 ${width + 2} ${height + 2}`);
+        .attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
+      
+      const graphHeight = this.g.graph().height;
+      const graphWidth = this.g.graph().width;
+
+        // ===== 自动缩放和居中 =====
+      const scale = Math.min(svgWidth / graphWidth, svgHeight / graphHeight);
+
+      const translateX = (svgWidth - graphWidth * scale) / 2;
+      const translateY = (svgHeight - graphHeight * scale) / 2;
+
+      this.inner.attr("transform", `translate(${translateX},${translateY}) scale(${scale})`);
     },
 
     /** 更新图形 */
diff --git a/src/views/wf/degraD3_2.vue b/src/views/wf/degraD3_2.vue
index 808dfe68..d974c62c 100644
--- a/src/views/wf/degraD3_2.vue
+++ b/src/views/wf/degraD3_2.vue
@@ -65,7 +65,6 @@ const init = async () => {
     });
     nodes.value = nodes_;
     edges.value = edges_;
-    console.log("x", nodes.value, edges.value)
 }
 defineExpose({ init })
 </script>
\ No newline at end of file