src/components/scDegra.vue

@@ -61,15 +61,9 @@ export default {
       });
 
       this.render = new dagreD3.render();
-      let svg = d3.select("#mySvg").attr("preserveAspectRatio", "xMidYMid meet");
+      let svg = d3.select("#mySvg");
       this.inner = svg.append("g");
 
-      // 缩放支持
-      let zoom = d3.zoom().on("zoom", (event) => {
-        this.inner.attr("transform", event.transform);
-      });
-      svg.call(zoom);
-
       this.renderGraph();
       this.bindNodeClick(svg);
     },
@@ -77,7 +71,7 @@ export default {
     /** 渲染节点和边 */
     renderGraph() {
       let that = this;
-      that.inner.selectAll("*").remove();  // 清空内部元素
+
       // 清空原有节点和边
       that.g.nodes().forEach((v) => that.g.removeNode(v));
       that.g.edges().forEach((e) => that.g.removeEdge(e));
@@ -97,46 +91,41 @@ export default {
         }
       });
 
-      const edgeGroups = {};
+      // 添加边（带唯一 key 和颜色）
-      that.edges.forEach((edge) => {
+      that.edges.forEach((edge, index) => {
-        const key = `${edge.source}_${edge.target}`;
+        let edgeColor = "green"; // 默认绿色
-        if (!edgeGroups[key]) edgeGroups[key] = [];
+        if (edge.label === "驳回") edgeColor = "red";
-        edgeGroups[key].push(edge);
+        if (edge.label === "退回") edgeColor = "red";
-      });
 
-      // 定义几种可选曲线
+        that.g.setEdge(
-      const curves = [d3.curveBasis, d3.curveCardinal, d3.curveBundle.beta(0.8)];
+          edge.source,
-
+          edge.target,
-      // 按分组循环，避免重叠
+          {
-      Object.values(edgeGroups).forEach((edges) => {
+            label: edge.label,
-        edges.forEach((edge, index) => {
+            id: edge.id,
-          let edgeColor = "green";
+            style: `fill:#ffffff;stroke:${edgeColor};stroke-width:1.5px`,
-          if (edge.label === "驳回" || edge.label === "退回") edgeColor = "red";
+            curve: d3.curveBasis,
-
+            minlen: 1 + index % 3,
-          that.g.setEdge(
+          },
-            edge.source,
+          `${edge.source}_${edge.target}_${edge.id}`
-            edge.target,
+        );
-            {
-              label: edge.label,
-              id: edge.id,
-              // ✅ 给每条边做区分
-              curve: curves[index % curves.length],
-              labeloffset: 16 + index * 10, // 标签错开
-              minlen: 2 + index,            // 强制 dagre 给一点空间
-              style: `fill:none;stroke:${edgeColor};stroke-width:1.5px`,
-            },
-            `${edge.source}_${edge.target}_${edge.id}`
-          );
-        });
       });
 
       // 渲染图
       this.render(this.inner, this.g);
 
-      // 自动计算 viewBox 尺寸
+      // 设置 SVG 尺寸
-      const { width, height } = this.g.graph();
+      let mySvgHeight =
-      d3.select("#mySvg")
+        document.getElementsByClassName("nodes")[0]?.getBoundingClientRect().height +
-        .attr("viewBox", `0 0 ${width + 2} ${height + 2}`);
+        50;
+      let mySvgWdith =
+        document.getElementsByClassName("output")[0]?.getBoundingClientRect().width +
+        150;
+
+      if (mySvgHeight && mySvgWdith) {
+        document.getElementById("mySvg").setAttribute("height", mySvgHeight);
+        document.getElementById("mySvg").setAttribute("width", mySvgWdith);
+      }
     },
 
     /** 更新图形 */