Javascript D3.js y轴记号和网格线不对齐

在我的d3条形图中，整数值应该有Y轴动态刻度和网格线（十进制值没有刻度和网格线）。但它不起作用，请帮我

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 

var itemData=[{月份：三月，年份：2018，编号：26，日期：1519842600000}，{月份：五月，年份：2018，编号：34，日期：152511300000}]；
createChart（itemData）
createChart（itemData）{
const router_temp=this.router；
常量元素=this.chartContainer.nativeElement；
const factoryId=itemData['id']；
const data=itemData.data；
d3.选择（元素）.selectAll（'*'）.remove（）；
常量div=d3。选择（'body'）。追加（'div'））
.attr（'类'，'工具提示条形图'）
.style（“显示”、“无”）；
const svg=d3.选择（元素），
边距={顶部：10，右侧：10，底部：20，左侧：30}，
宽度=+this.el.nativeElement.offsetWidth-margin.left-margin.right，
高度=+svg.attr（'height'）-margin.top-margin.bottom；
常量x=d3.scaleBand（）.范围（[10，宽度-10]）。填充（1），
y=d3.scaleLinear（）.rangeRound（[height，0]）；
//添加X网格线
append（'g'）
.attr（'class'，'grid'）
.attr（'transform'，'translate（30'，+height+'））
.调用（生成网格线（）
.1尺寸（高度）
.tick格式（“”）
);
//添加Y网格线
append（'g'）
.attr（'class'，'grid'）
.attr（'transform'，'translate（30,10）'
.调用（生成网格线（）
.1.1尺寸（-宽度）
.tick格式（“”）
);
常量g=svg.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
x、 域（data.map（函数（d）{returnd.month；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.number；}）]；
//
g、 选择全部（“.bar”）
.数据（数据）
.enter（）.append（'rect'）
.attr（'class'，'bar'）
.attr（'x'，函数（d）{返回x（d.month）；}）
.attr（'y'，函数（d）{返回y（d.number）；}）
.attr（'width'，12）
.attr（'height'，函数（d）{返回高度-y（d.number）；}）
.on（'mouseover'，函数（d）{
div.style（'display'，'block'）；
div.html(
'' +
'' +
d、 月+
'' +
'' +
d、 数+
'' +
'' +
“转换和迁移的应用程序数”+
'' +
''
)
.style（'left'，（d3.event.pageX+15）+'px'）
.style（'top'，（d3.event.pageY-50）+'px'）；
})
.on（'mouseout'，函数（d）{
div.style（'display'，'none'）；
})
const dataLength=data.length；
常量xPositions=[]；
for（设i=0；i

我创建了一个

---

虽然我不得不改变一些东西，以说明没有角度，但显示轴网格线和标签对齐。我将所有内容移动到一个

g

组中，然后转换，单个组件不再转换。

您想知道为什么网格线与轴标签不一致吗？另外，我会将您的网格线添加到您在网格线下方创建的g组中，这样您就不必变换了。@pmkroeker，是的。你能帮个忙吗。你能不能提供这个工作的样本代码，会有很大帮助。