D3 годы по оси абсцисс

У меня возникли проблемы с построением оси абсцисс, которая включает годы и показывает количество арестов за каждый год.

Я сохранил свои данные в массивах.

Например: аресты var = [100,200,300,400] и годы var = [2000,2001,2002,2003].

Я хотел бы создать гистограмму, которая включает аресты по оси Y и соответствующие годы по оси X.

В приведенном ниже коде годы = [1988,1989..до .... 2018] и number_of ... = [1000,200 ...].

Оба являются массивами и имеют одинаковый размер.

var barWidth = 35;
var barOffset = 5;

var margin = 30;
var width = 1160;
var height = 200;

var data = number_of_arrest_per_year;

var x = d3.scaleOrdinal()
    .domain([new Date(1988),new Date(2018])
    .range([0,width]);

var y = d3.scaleLinear()
    .domain([0,d3.max(number_of_arrest_per_year)+500])
    .range([height,0]);

var chart = d3.select("#chart");

chart.attr("width",width + 2*margin)
    .attr("height",height + 2*margin)
    .append("g")
        .attr("transform","translate(" + 80 + "," + margin + ")")
    .selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("width",20)
    .attr("height",function(d) { return height - y(d); })
    .attr("x",function(d,i) { return i *(barWidth + barOffset); })
    .attr("y",function(d) { return y(d); });

var xAxis = d3.axisBottom(x)
    .ticks(31)

var yAxis = d3.axisLeft(y)
    .ticks(5);

chart.append("g")
    .attr("transform", "translate(" + 80 + "," + (height+margin) + ")")
    .attr("class","axis")
    .call(xAxis);

chart.append("g")
    .attr("transform", "translate(" + 80 + "," + margin + ")")
    .attr("class","axis")
    .call(yAxis);

Большое спасибо.

Я обновил свой код:

1.

var x = d3.scaleBand()
    .domain(years)
    .range([0, width])
    .paddingInner(0.08)

2.

 .attr("width",x.bandwidth())