Anwendung der Datumsformatierung auf X-Achsen-Text

Question

Ich versuche, d3.time.format("%b-%Y") auf die Daten auf der X-Achse anzuwenden.

Hier ist der Code, der die Achse addiert und Etiketten

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

Die oben zu den Codezeilen 285-309 dieser Visualisierung betrifft: kann https://plnkr.co/edit/3d5UhM?p=preview

der Hoffnung, jemand helfen, da dies eine sein wird, ziemlich häufige Manipulation, die ich anwenden möchte. Was mache ich falsch?

Answer 1

Sie übergeben kein gültiges Datum an formatDateOutputX, so dass es nicht weiß, wie es zu verarbeiten ist. Sie müssen den Wert angemessen analysieren, und Sie können es auf viele Arten tun. Da d3 time.format eine parse Methode zur Verfügung stellt, ist dies wahrscheinlich der beste Weg zu folgen.

In Ihrem Fall so etwas wie dies funktioniert:

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

die Plunkr prüfen.