如何缩放条形图值以始终适合d3.js中的窗口？

Question

这是我用来创建具有给定值的条形图的代码。 目前，大小尚未缩放，因此，如果我尝试将大小设置为60以上，则超过div。我希望它适合窗口，而不管值有多大。我需要数学计算还是在d3.js中有此功能？

let obj = []
obj[0] = dat

// Create variable for the SVG
var svg = d3.select("#chart").append("svg")
  .attr("height", document.getElementById('chart').style.height)
  .attr("width", 225);

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll(".bar")
  .data(obj)
  .enter().append("rect")
  .attr("class", 'bar')
  .attr("height", function(d, i) {
    return (obj[0].orig * 5)
  })
  .attr("width", 60)
  .attr("x", function(d, i) {
    return (i * 80) + 25
  })
  .attr("y", function(d, i) {
    return 285 - (obj[0].orig * 5)
  });

svg.selectAll(".bar2")
  .data(obj)
  .enter().append("rect")
  .attr("class", 'bar2')
  .attr("height", function(d, i) {
    return (obj[0].le * 5)
  })
  .attr("width", 60)
  .attr("x", function(d, i) {
    return (i * 80) + 25 + 60
  })
  .attr("y", function(d, i) {
    return 285 - (obj[0].le * 5)
  });

svg.selectAll(".bar3")
  .data(obj)
  .enter().append("rect")
  .attr("class", 'bar3')
  .attr("height", function(d, i) {
    return (obj[0].ctd * 5)
  })
  .attr("width", 60)
  .attr("x", function(d, i) {
    return (i * 80) + 25 + (2 * 60)
  })
  .attr("y", function(d, i) {
    return 285 - (obj[0].ctd * 5)
  });