Применение форматирования даты по тексту оси X

Question

Я пытаюсь применить d3.time.format("%b-%Y") к датам, используемым на оси х.

Вот код, который добавляет оси и метки

var xLabels = svg 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + (margin.top + height + 12) + ")"); 

var formatDateOutputX = d3.time.format("%b-%Y"); 

xLabels.selectAll("text.xAxis") 
    .data(BarData) 
    .enter() 
    .append("text") 
    .text(function(d) { 
    return d.dt;      //<< returns dates 
    //return formatDateOutputX(d.dt); //<< NOTHING RETURNED 
    }) 
    .attr({ 
    'text-anchor': "middle", 
    transform: function(d, i) { 
     var x = (i * (width/BarData.length)) + ((width/BarData.length - barPadding)/2); 
     var y = 20; 
     return 'translate(' + x + ',' + y + ')rotate(-90)'; 
    }, 
    dy: "0.35em", //dx: "-1.05em", 
    'class': "xAxis" 
    }); 

Вышеизложенное относится к линиям кода 285-309 этой визуализации: https://plnkr.co/edit/3d5UhM?p=preview

Надеясь кто-то может помочь, как это будет довольно распространенные манипуляции, которые я хочу применить. Что я делаю не так?

Answer 1

Вы не пропустили действительную дату до formatDateOutputX, так что она не знает, как ее обрабатывать. Вы должны проанализировать значение соответствующим образом, и вы можете сделать это разными способами. Поскольку d3 предоставляет метод parse до time.format, это, вероятно, лучший способ следовать.

В вашем случае что-то вроде этого будет работать:

var formatDateOutputX = d3.time.format("%b-%Y"); 
    var readDate = d3.time.format("%d/%m/%Y").parse; 

    xLabels.selectAll("text.xAxis") 
     .data(BarData) 
     .enter() 
     .append("text") 
     .text(function(d) { 
     return formatDateOutputX(readDate(d.dt)); 
     }) 

Проверьте Plunkr.