come formattare temporale dell'uso asseX d3.js

Question

Secondo la demo su http://bl.ocks.org/mbostock/3883245

Non so come il tempo formato su asseX

questo è il mio codice: js:

 

    var data = [{ 
      "creat_time": "2013-03-12 15:09:04", 
      "record_status": "ok", 
      "roundTripTime": "16" 
     }, { 
      "creat_time": "2013-03-12 14:59:06", 
      "record_status": "ok", 
      "roundTripTime": "0" 
     }, { 
      "creat_time": "2013-03-12 14:49:04", 
      "record_status": "ok", 
      "roundTripTime": "297" 
     }, { 
      "creat_time": "2013-03-12 14:39:06", 
      "record_status": "ok", 
      "roundTripTime": "31" 
     },{ 
      "creat_time": "2013-03-12 14:29:03", 
      "record_status": "ok", 
      "roundTripTime": "0" 
    }]; 
    var margin = {top: 20, right: 20, bottom: 30, left: 50}; 
    var width = 960 - margin.left - margin.right; 
    var height = 500 - margin.top - margin.bottom; 
    var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; 
    var x = d3.time.scale() 
     .range([0, width]); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    var line = d3.svg.line() 
     .x(function(d) { return x(d.creat_time); }) 
     .y(function(d) { return y(d.roundTripTime); }); 


    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    data.forEach(function(d) { 
     d.creat_time = parseDate(d.creat_time); 
     d.roundTripTime = +d.roundTripTime; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.creat_time; })); 
    y.domain(d3.extent(data, function(d) { return d.roundTripTime;})); 

    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

    svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("return time(ms)"); 

    svg.append("path") 
      .datum(data) 
      .attr("class", "line") 
      .attr("d", line); 

questo è svg:

In svg, l'ora è 12 ore di clock, ma nei miei dati l'ora è orologio di 24 ore. come mantenere lo stesso formato su SVG e dati?

Qualsiasi aiuto è apprezzato. (Ps: spero che non ti dispiaccia il mio inglese, è così male.)

Answer 1

È possibile utilizzare la funzione tickFormat sull'oggetto asse come di seguito

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(d3.time.format("%H")); 

Il %H specifica hour (24-hour clock) as a decimal number [00,23]. Controllare questo link D3 time formatting per ulteriori informazioni

È possibile controllare un esempio di lavoro in questo affluente 24hr time example

Answer 2

La risposta accettata è effettivamente corretto, ma nel mio caso, ho bisogno della flessibilità per i formati per adattarsi a diverse scale (pensa allo zoom), ma anche per garantire che venga utilizzato l'orologio della 24 ore. La chiave è definire un formato orario multi-risoluzione . Vedere la pagina Documentation per i dettagli.

Il mio codice:

var axisTimeFormat = d3.time.format.multi([ 
    [".%L", function(d) { return d.getMilliseconds(); }], 
    [":%S", function(d) { return d.getSeconds(); }], 
    ["%H:%M", function(d) { return d.getMinutes(); }], 
    ["%H:%M", function(d) { return d.getHours(); }], 
    ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }], 
    ["%b %d", function(d) { return d.getDate() != 1; }], 
    ["%B", function(d) { return d.getMonth(); }], 
    ["%Y", function() { return true; }] 
]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(axisTimeFormat); 

Answer 3

Voglio aggiungere this link a una pagina demo impressionante. È un parco giochi quando puoi scegliere che tipo di identificatore di formato hai bisogno per il tuo caso. È molto utile quando non ricordi/conosci che cosa un identificatore di formato dovresti passare alla tua funzione d3.timeFormat.

Inoltre, desidero notare che se si utilizza d3 versione 4, è necessario utilizzare la funzione d3.timeFormat anziché d3.time.format.

Answer 4

In v4,

... 
var scaleX = d3.scaleTime().range([0, width]); 
var axisBottom = d3.axisBottom(scaleX) 
        .ticks(d3.timeMinute, 10); // Every 10 minutes 
... 

notare che l'uso d3.timeMinute - non d3.timeMinutes