如何根据数据输入正确缩放d3.js中的y轴

Question

我创建了一个小的Barchart。我的问题是y轴无法根据我的数据集缩放。这是屏幕截图：

因此您可以看到313比800刻度高一点。我希望300成为300。我调整了缩放比例，但最终最终将其完全弄乱了。我是D3.js的新手，所以希望有人可以提供帮助。

这是我的代码：

var svgWidth = 1000, svgHeight = 800;
var barWidth = svgWidth / month_description.length;
var barPadding = 5;

var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);

var barChart = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("y", function(d) {
         return svgHeight - d - 20
    })
    .attr("x", function(d, i) {
    return i + 10;
    })
    .attr("height", function(d) {
        return d;
    })
    .attr("width", barWidth - barPadding)
    .attr("class", "bar")
    .attr("transform", function (d, i) {
        var translate = [barWidth * i, 0];
        return "translate("+ translate +")";
    });

var text = svg.selectAll("text")
    .data(data)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("y", function(d, i) {
        return svgHeight - 20;
    })
    .attr("x", function(d, i) {
        return barWidth * i + 35;
    })
    .attr("fill", "white");

var xScale = d3.scaleLinear()
    .domain([0, d3.max(month_description)])
    .range([0, svgWidth]);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([svgHeight, 0]);

var x_axis = d3.axisBottom()
    .scale(xScale);

var y_axis = d3.axisLeft()
    .scale(yScale);

svg.append("g")
    .attr("transform", "translate(50, 10)")
    .call(y_axis);

var xAxisTranslate = svgHeight - 20;

svg.append("g")
    .attr("transform", "translate(50, " + xAxisTranslate  +")")
    .call(x_axis);

非常感谢您的帮助。首先十分感谢！！