无法将刻度线与d3.js对齐

Question

Working with one bar chart with d3.js I am unable to align ticks in x axis with bars.

In left and right verges the ticks are ok, but not in the middle. Here is the code:

var formatDate = d3.time.format("%e %b");
var height = 325;
var xTimeScale = d3.time.scale()
        .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 2].date), 1)])
        .range([30, width]);

var xAxis = d3.svg.axis()
        .scale(xTimeScale)
        .orient("bottom")
        .ticks(d3.time.days, .1)
        .tickFormat(formatDate);

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

chart.selectAll(".xaxis text") 
        .attr("transform", function(d) {return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)";});

What am I missing? Thanks in advance.

Update: Here is the jsFiddle updated with chrtan suggestions. My problem now is to align text with the center of bar and not in left.

Answer 1

From the looks of your graph, you lost a bar's worth of space. If all the bars are supposed to be left-aligned against a tick, that final bar you have should be to the right of the January 31st tick.

You might need to add the February 1st tick by perhaps changing the [data.length - 2] to [data.length - 1] in the domain() for your xTimeScale.

Then for display purposes, you could probably remove the last tick axis text with:

d3.select(chart.selectAll(".xaxis text")[0].pop()).remove();

The inner selectAll should get the array containing your xAxis tick texts and then pop the very last tick. This last tick should then be removed by the outer select.

Answer 2

An example with an auto time ticks with d3.js

// set domain for axis
var x_domain = d3.extent(data, function(d) { return new Date(d.date); });
//format date
var  date_format = d3.time.format('%Y %B');

var vis = d3.select("#graph")
    .append("svg:svg")
    .attr('class', 'chart')
    .attr("width", width)
    .attr("height", height);

var yScale = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.data; })]).nice()
    .range([height - padding, padding]); 
var xScale = d3.time.scale()
    .domain(x_domain)
    .range([padding, width - padding]);
// define the y axis
var yAxis = d3.svg.axis()
    .orient("left")
    .scale(yScale);
// define the x axis
var xAxis = d3.svg.axis()
    .orient("bottom")
    .scale(xScale)
    .tickFormat(date_format);
// draw y axis with labels and move in from the size by the amount of padding
vis.append("g")
    .attr("class", "axis")
    .attr("transform", "translate("+padding+",0)")
    .call(yAxis);
// draw x axis with labels and move to the bottom of the chart area
vis.append("g")
    .attr("class", "xaxis axis")
    .attr("transform", "translate(0," + (height - padding) + ")")
    .call(xAxis);

// and set data in graph...

a great example : http://bl.ocks.org/phoebebright/3061203