Unable To Align Ticks With D3.js

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 forma

Solution 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.

Solution 2:

An example with an auto time ticks with d3.js

// set domain for axisvar x_domain = d3.extent(data, function(d) { returnnew Date(d.date); });
//format datevar  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 axisvar yAxis = d3.svg.axis()
    .orient("left")
    .scale(yScale);
// define the x axisvar 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