D3.js y- axis ticks and grid lines do not align

Question

In my d3 bar chart, I should have Y-axis dynamic ticks and grid lines for integer values (no ticks and grid lines for decimal values). But its not working , Please help me on this

var itemData =[{month: "MARCH", year: 2018, number: 26, date:1519842600000},{month: "MAY", year: 2018, number: 34, date: 1525113000000}];
createChart(itemData )

     createChart(itemData) {
            const router_temp = this.router;
            const element = this.chartContainer.nativeElement;
            const factoryId = itemData['id'];
            const data = itemData.data;
            d3.select(element).selectAll('*').remove();

            const div = d3.select('body').append('div')
                        .attr('class', 'tooltip-bar-chart')
                        .style('display', 'none');

            const svg = d3.select(element),
            margin = {top: 10, right: 10, bottom: 20, left: 30},
            width = +this.el.nativeElement.offsetWidth - margin.left - margin.right,
            height = +svg.attr('height') - margin.top - margin.bottom;

            const x = d3.scaleBand().range([10, width - 10]).padding(1),
                y = d3.scaleLinear().rangeRound([height, 0]);

            // add the X gridlines
            svg.append('g')
              .attr('class', 'grid')
              .attr('transform', 'translate(30,' + height + ')')
              .call(make_x_gridlines()
                .tickSize(-height)
                .tickFormat('')
              );
            // add the Y gridlines
            svg.append('g')
                .attr('class', 'grid')
                .attr('transform', 'translate(30, 10)')
                .call(make_y_gridlines()
                    .tickSize(-width)
                    .tickFormat('')
                );

            const g = svg.append('g')
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

            x.domain(data.map(function(d) { return d.month; }));
            y.domain([0, d3.max(data, function(d) { return d.number; })]);
            //

            g.selectAll('.bar')
              .data(data)
              .enter().append('rect')
                .attr('class', 'bar')
                .attr('x', function(d) { return x(d.month); })
                .attr('y', function(d) { return y(d.number); })
                .attr('width', 12)
                .attr('height', function(d) { return height - y(d.number); })
                .on('mouseover', function(d) {
                 div.style('display', 'block');
                 div.html(
                          '<div class=\'main\'>' +
                            '<div class=\'month\'>' +
                              d.month +
                            '</div>' +
                            '<div class=\'number\'>' +
                              d.number +
                            '</div>' +
                            '<div class=\'bottom\'>' +
                              'Number of Applications Transformed & Migrated' +
                            '</div>' +
                          '</div>'
                          )
                   .style('left', (d3.event.pageX + 15) + 'px')
                   .style('top', (d3.event.pageY - 50) + 'px');
                 })
                .on('mouseout', function(d) {
                  div.style('display', 'none');
                })

            const dataLength = data.length;
            const xPositions = [];
            for (let i = 0; i < dataLength; i += 1) {
              xPositions.push(x(data[i].month) + margin.left);
            }
            const newX = d3.scaleOrdinal().range(xPositions);
            const xScale = newX.domain(itemData.xlabels);

            svg.append('g')
              .attr('class', 'axis axis--x')
              .attr('transform', 'translate(0,' + (height + 10) + ')')
              .call(d3.axisBottom(xScale));

            g.append('g')
              .attr('class', 'axis axis--y')
              .call(d3.axisLeft(y).ticks(5));



            // gridlines in x axis function
            function make_x_gridlines() {
              return d3.axisBottom(x)
                .ticks(1);
            }

            // gridlines in y axis function
            function make_y_gridlines() {
                return d3.axisLeft(y)
                         .ticks(5);
            }
          }
        }

Here is sample 

Answer 1

I created a fiddle .

that while I had to change a few things to account for no angular, but shows the axis gridlines and labels aligned. I moved everything into one g group is is then translated and the individual components are no longer translated.