如何限制D3 Graphviz初始适配最大缩放比例？或渲染前计算宽高

方法一：渲染后手动控制缩放比例 #

d3-graphviz无法在渲染前获取图的尺寸，但可以在渲染完成后通过回调计算并调整缩放，限制最大放大比例（比如不让图超过原始尺寸，或自定义最大缩放倍数）：

// 初始化d3-graphviz
const container = d3.select("#graph-container");
const containerWidth = container.node().clientWidth;
const containerHeight = container.node().clientHeight;

const graphviz = container
  .graphviz()
  .width(containerWidth)
  .height(containerHeight);

// 渲染dot代码并调整缩放
graphviz.renderDot(dotCode, function() {
  const svg = this.svg();
  const viewBox = svg.viewBox.baseVal;
  const graphWidth = viewBox.width;
  const graphHeight = viewBox.height;
  
  // 计算容器与图的适配缩放比例
  const scaleX = containerWidth / graphWidth;
  const scaleY = containerHeight / graphHeight;
  let scale = Math.min(scaleX, scaleY);
  
  // 限制最大缩放比例（示例：最大不超过1，即不放大原图）
  const maxScale = 1;
  scale = Math.min(scale, maxScale);
  
  // 应用缩放并保持居中
  svg.attr("transform", `translate(${containerWidth/2}, ${containerHeight/2}) scale(${scale}) translate(${-graphWidth/2}, ${-graphHeight/2})`);
});

核心逻辑：先让Graphviz正常渲染，拿到图的实际尺寸后，计算适配容器所需的缩放比例，再将该比例与设定的最大缩放值取较小值，最后重新设置SVG的transform实现居中+限制缩放。

方法二：给Graphviz添加隐形节点强制最小画布尺寸 #

通过在dot代码中添加一个不可见的大尺寸节点，让Graphviz生成的画布至少保持该节点的大小，避免小图因画布过小被过度放大：

digraph {
  // 添加不可见占位节点，强制最小画布尺寸（单位：英寸，1英寸≈96px）
  node [style=invisible]
  dummy [shape=rectangle, width=5, height=4] // 对应约480px宽、384px高的最小画布
  
  // 你的正常节点与边
  node [style=filled]
  A -> B
  B -> C
}

这个方法无需额外JS逻辑，直接通过Graphviz布局参数控制画布最小尺寸，d3-graphviz适配容器时就不会把小图放得过大。

为什么size="500!,500!"没生效？ #

size属性是限制Graphviz输出画布的最大尺寸，当图本身尺寸小于设定值时，Graphviz不会自动放大画布到该尺寸，只会使用图的实际尺寸，因此d3-graphviz仍会将小图缩放到容器大小，无法达到限制效果。

内容的提问来源于stack exchange，提问作者apache