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 @@ @@ -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 }) \ No newline at end of file