如何调整D3.js甘特图示例的SVG以适配固定宽高的自定义容器

问题根源是你参考的示例默认将SVG直接挂载到页面<body>节点，且宽高默认取窗口视口尺寸，才会出现固定在页面底部、占满全屏的问题，按以下步骤修改即可：

• 修改SVG挂载节点
  找到示例代码中创建SVG的语句，将原本绑定到body的逻辑改为绑定到你的目标容器，将

  d3.select("body").append("svg")
  

  替换为

  d3.select("#d3-container").append("svg")
  

• 适配容器固定宽高
  首先给目标容器提前设置预设尺寸的CSS：

  #d3-container {
    width: 1200px; /* 替换为你预设的固定宽度 */
    height: 700px; /* 替换为你预设的固定高度 */
  }
  

  再修改示例中设置SVG宽高的逻辑，不要使用window.innerWidth/window.innerHeight这类取窗口尺寸的属性，改为读取容器的实际尺寸：

  const container = d3.select("#d3-container")
  const svgWidth = container.node().clientWidth
  const svgHeight = container.node().clientHeight
  
  const svg = container.append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
  

• 调整甘特图绘制区域参数
  将示例中甘特图的实际绘制宽高（扣除边距后的区域）同步修改为适配SVG尺寸的值：

  const margin = {top: 20, right: 30, bottom: 30, left: 80} // 可按需调整边距
  const ganttWidth = svgWidth - margin.left - margin.right
  const ganttHeight = svgHeight - margin.top - margin.bottom
  

  后续x轴、y轴、任务条的绘制都基于上面的ganttWidth和ganttHeight计算即可。

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