使用d3-graphviz对图形进行缩放并居中的最佳实现方式是什么

你遇到的缩放不生效、无法居中的问题是fit(true)和scale()的优先级冲突导致的，直接修改配置即可实现自定义缩放+自动居中，不需要手动修改元素属性：

修改后的核心代码 #

d3.select("#graph")
  .graphviz()
    .width(300)
    .height(300)
    .fit(false) // 关闭自动适配逻辑，避免覆盖你手动设置的缩放比例
    .scale(0.5)
    .center(true) // 开启自动居中，将图形对齐到SVG视口中心
    .renderDot('digraph {a -> b}');

配置说明 #

• fit(true)的作用是自动计算缩放系数，让生成的图形完全撑满你设置的SVG宽高，它的优先级高于手动设置的scale()值，这是你之前设置的scale(0.5)不生效的核心原因
• center(true)会自动计算偏移量，将图形平移到视口中心，不需要你手动调整<svg>和<g>元素的属性
  如果需要兼顾自动适配和自定义缩放比例，也可以通过scaleExtent()方法设置缩放的上下限，再配合fit(true)使用，满足特殊场景的需求。

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