|
|
@@ -3616,24 +3616,26 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
const containerWidth = container.clientWidth;
|
|
|
const containerHeight = container.clientHeight;
|
|
|
|
|
|
- // 计算内容边界（三个圆的范围）
|
|
|
- const minX = layerCenterX[0] - layerRadius[0] - 50;
|
|
|
- const maxX = layerCenterX[0] + layerRadius[0] + 50;
|
|
|
- const minY = layerCenterY[0] - layerRadius[0] - 30;
|
|
|
- const maxY = layerCenterY[2] + layerRadius[2] + 30;
|
|
|
-
|
|
|
- const contentWidth = maxX - minX;
|
|
|
- const contentHeight = maxY - minY;
|
|
|
-
|
|
|
- // 计算缩放比例（留出边距）
|
|
|
- const padding = 20;
|
|
|
- const scaleX = (containerWidth - padding * 2) / contentWidth;
|
|
|
- const scaleY = (containerHeight - padding * 2) / contentHeight;
|
|
|
+ // 使用getBBox获取g元素的实际边界（包含所有子元素）
|
|
|
+ const gNode = g.node();
|
|
|
+ if (!gNode) return;
|
|
|
+
|
|
|
+ const bbox = gNode.getBBox();
|
|
|
+ if (bbox.width === 0 || bbox.height === 0) return;
|
|
|
+
|
|
|
+ // 添加边距
|
|
|
+ const padding = 30;
|
|
|
+ const contentWidth = bbox.width + padding * 2;
|
|
|
+ const contentHeight = bbox.height + padding * 2;
|
|
|
+
|
|
|
+ // 计算缩放比例
|
|
|
+ const scaleX = containerWidth / contentWidth;
|
|
|
+ const scaleY = containerHeight / contentHeight;
|
|
|
const scale = Math.min(scaleX, scaleY, 1); // 最大不超过1
|
|
|
|
|
|
// 计算平移使内容居中
|
|
|
- const contentCenterX = (minX + maxX) / 2;
|
|
|
- const contentCenterY = (minY + maxY) / 2;
|
|
|
+ const contentCenterX = bbox.x + bbox.width / 2;
|
|
|
+ const contentCenterY = bbox.y + bbox.height / 2;
|
|
|
const translateX = containerWidth / 2 - contentCenterX * scale;
|
|
|
const translateY = containerHeight / 2 - contentCenterY * scale;
|
|
|
|
|
|
@@ -3641,8 +3643,8 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
svg.call(zoom.transform, d3.zoomIdentity.translate(translateX, translateY).scale(scale));
|
|
|
}}
|
|
|
|
|
|
- // 首次渲染也调用一次适配（不等模拟结束）
|
|
|
- setTimeout(fitToView, 100);
|
|
|
+ // 首次渲染延迟调用适配（等待DOM完成）
|
|
|
+ setTimeout(fitToView, 300);
|
|
|
|
|
|
// 拖拽函数
|
|
|
function dragstarted(event, d) {{
|
