dagre/d3构建的自上而下有向图过宽，如何添加页面水平滚动条

水平滚动条无需在d3、dagre的图形渲染逻辑里做特殊适配，核心是通过DOM结构和CSS规则控制SVG的溢出行为，具体实现步骤如下：

• 调整DOM结构层级
  不要将SVG直接挂载在全局流布局的容器下，需新增一层滚动视口作为SVG的直接父容器，嵌套逻辑为：
  页面容器 > 滚动视口 > 渲染dagre图的SVG实例
• 配置滚动视口的CSS属性
  对滚动视口设置核心样式：
  • overflow-x: auto：横向内容超出视口宽度时自动显示水平滚动条
  • overflow-y: hidden：屏蔽纵向溢出带来的冗余滚动条
  • 视口宽度设为100%，占满父级的可用屏幕宽度，不随内部SVG的宽度撑开
• 取消SVG的强制宽度适配逻辑
  移除SVG设置的width: 100%强制适配样式，将SVG的实际宽度设置为dagre布局计算返回的图幅总宽度（可直接读取dagre布局实例的graph.graph().width值），高度设置为对应布局返回的总高度。此时SVG的尺寸和真实图幅完全一致，超出外层滚动视口的部分自然会触发水平滚动。
• 常见踩坑规避
  • 不要将SVG的preserveAspectRatio属性设置为强制缩放模式，否则SVG会无视自身标签尺寸强行适配容器大小，永远无法触发内容溢出和滚动条
  • 如果项目中使用了d3-zoom插件实现图形缩放交互，需将缩放事件的绑定范围限定在滚动视口和SVG范围内，不要绑定到全局window，避免页面滚动和图形缩放事件产生冲突

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