feat: base 自适应容器和自动缩放

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})`);
     },
 
     /** 更新图形 */

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>