d3.js - 如何更改D3图表中的xaxis标签？

Question

下面的代码显示了我当前的图表。如何编辑 xaxis 的标签以显示年份“2015”、“2016”、“2017”、“2018”和“2019”？我对这个 D3 真的很陌生。

var data = new Array (1, 2, 3, 4, 5);
var x_scale = d3.scale.linear()
      .domain([0,d3.max(data, function(d,i) { return i+1 })])
      .range([62,540])
    var xAxis = d3.svg.axis()
      .scale(x_scale)
      .tickSize(0,0)
      .ticks(5)
      .tickPadding(6)
      .orient("bottom");
    d3.select("svg").append("g")
      .call(xAxis)
      .attr("class","xaxis")
      .attr("transform","translate(0,364)");


var y_scale = d3.scale.linear()
  .domain([d3.max(data, function(d) { return d }),0])
  .range([54,364])
var yAxis = d3.svg.axis()
  .scale(y_scale)
  .tickSize(-10,0)
  .ticks(5)
  .tickPadding(6)
  .orient("left");
d3.select("svg").append("g")
  .call(yAxis)
  .attr("class","yaxis")
  .attr("transform","translate(62,0)");


var saeule = d3.select("#saeulen").append("g")
  .attr("class","saeule")
  .style("color","#F49600");
var bar_padding=10;
var bar_width=x_scale(1)-x_scale(0)-bar_padding;
saeule.selectAll("g")
  .data(data)
  .enter() 
  .append ("rect")
    .attr("fill","#F49600")
    .attr("x" , function (d,i) { return (x_scale(i+1) - (bar_width/2)) })
    .attr("y", function (d,i) { return (y_scale(d)) })   
    .attr("width", bar_width)
    .attr("height", function (d,i) { return (y_scale(0)-y_scale(d)) });

Answer 1

您可以在 x 轴上指定自己的刻度格式:

var xAxis = d3.svg.axis()
  .scale(x_scale)
  .tickSize(0,0)
  .ticks(5)
  .tickPadding(6)
  .orient("bottom")
  .tickFormat(function(d){return d+2015;});//will return 2015 for 0 2016 for 1 etc.

工作代码here