Невозможно выровнять тики с d3.js

Question

Работа с одной гистограммой с d3.js Я не могу выровнять тики по оси x с помощью баров.

В левом и правом граничащий тики в порядке, но не в середине. Вот код:

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)";}); 

Что мне не хватает? Спасибо заранее.

Обновление: Адрес jsFiddle содержит chrtan Предложения. Теперь моя проблема заключается в выравнивании текста с центром бара, а не слева.

Answer 1

С точки зрения вашего графика вы потеряли пространство в баре. Если все бары должны быть выровнены по левому краю от галочки, этот последний бар должен быть справа от отметки 31 января.

Возможно, вам понадобится добавить отметку 1-го февраля, возможно, изменив значение [data.length-2] на [data.length-1] в домене() для вашего xTimeScale.

Тогда для целей отображения, вероятно, можно удалить последний тик текст оси с:

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

Внутренний SelectAll должен получить массив, содержащий ваши XAxis тик тексты, а затем поп самый последний тик. Этот последний тик затем должен быть удален внешним выбором.

Answer 2

Пример с автоматическим времени клещей с 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... 

отличный пример: http://bl.ocks.org/phoebebright/3061203