Как изменить ярлык xaxis на диаграмме D3?

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

Вы можете дать свой собственный формат клеща, как это на оси х:

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