Wie kann ich die Unix-Datumswerte entlang der Achse eines d3.js-Diagramms in das Format TT-MM-JJ konvertieren?

Question

Ich habe derzeit meine Daten in die Tabelle mit Unix-Datumsformat, aber ich habe Probleme beim Neuformatieren der Unix-Daten in einem anderen Format, wie TT-MM-JJ.

Im Moment habe ich die folgenden, und haben versucht, die Fläche unter xAchse = d3.svg.axis()

var vis = d3.select("#visualization"), 
    WIDTH = 800, 
    HEIGHT = 500, 
    MARGINS = { 
    top: 20, 
    right: 20, 
    bottom: 20, 
    left: 50 
    }, 
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) { 
    return d.date; 
    }), d3.max(lineData, function(d) { 
    return d.date; 
    })]), 
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) { 
    return d.weight; 
}), d3.max(lineData, function(d) { 
    return d.weight; 
    })]), 
xAxis = d3.svg.axis() 
    .scale(xRange) 
    .tickSize(10) 
    .tickSubdivide(true), 
yAxis = d3.svg.axis() 
    .scale(yRange) 
    .tickSize(20) 
    .orient('left') 
    .tickSubdivide(true); 

Könnte jemand bitte helfen bearbeiten?

Answer 1

Was ich tun würde ist (abhängig von der Länge Ihrer Daten) iterieren Sie darüber, bevor Sie eine d3-Zeichnung machen und das Datumsfeld Ihrer Datenobjekte auf ein formatiertes Datum umwandeln. Ich sage, abhängig von der Länge Ihrer Daten, denn wenn es sehr lang ist und Sie tatsächlich eine Seite rendern, sollten Sie vermeiden, zweimal darüber zu gehen, und Sie könnten wahrscheinlich diesen Schritt tun, wenn Sie über alle Ihre Daten gehen tatsächlich Dinge an eine SVG/G/Linie anfügen, was hast du. Ich mache es gerne getrennt für die Lesbarkeit.

var parseDate = d3.time.format("%d-%b-%y").parse; 

data.forEach(function(d){    

    var timestamp= new Date(d.timestamp * 1000); 
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; 
    var month = months[timestamp.getMonth()]; 
    var date = timestamp.getDate(); 
    var year = timestamp.getFullYear()-2000; 

    var formatted_time = date + '-'+ month + '-' + year; 

    d['date']= parseDate(formatted_time); 


}); 

Dies sollte Ihnen den Einstieg ermöglichen. In diesem Fall habe ich den Zeitstempel als Ganzzahl und abhängig von der Genauigkeit, die Sie mit 1000 multiplizieren können oder nicht wollen. %b ist die d3-Syntax für eine Named-Monat-Abkürzung.

Answer 2

Wenn Sie mit Zeitdaten arbeiten, versuchen Sie die integrierte Zeitskala von D3 (d3.time.scale) anstelle der linearen Skala (wo Sie xRange = d3.scale.linear haben). Sie können dann die Achse mit einem Zeitformat für ihre Ticks versehen (wie in xAxis.tickFormat(d3.time.format("%d-%b-%y"))), ohne eine Iteration über den Datensatz durchführen zu müssen.