Как правильно масштабировать ось Y в d3.js в соответствии с вводом данных

Question

Я создал небольшую диаграмму.Моя проблема в том, что ось 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);

Помощь очень ценится.Большое спасибо заранее!!