Question

我无法创建包含年份的x轴，并显示每年的逮捕次数。

我已将数据存储到数组中。

例如：var arrests = [100,200,300,400]和var years = [2000,2001,2002,2003]

我想创建一个条形图，其中包括y轴上的逮捕和x轴上的相应年份。

在以下代码中= year = [1988,1989..until .... 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())

D3在x轴上的年份

0 个答案: