jak sformatować czasu na OśX użytku d3.js

Question

Według demo na http://bl.ocks.org/mbostock/3883245

nie wiem jak format czasu na OśX

to mój kod: 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); 

to jest svg:

W svg, czas jest 12-godzinny, ale w moim czasie danych jest zegar 24-godzinny. jak zachować ten sam format na svg i danych?

Każda pomoc jest doceniana. (Ps: Mam nadzieję, że nie przeszkadza mój angielski, to jest tak źle.)

Answer 1

Można użyć funkcji tickFormat na obiekcie osi poniżej

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

%H określa hour (24-hour clock) as a decimal number [00,23]. Sprawdź ten link D3 time formatting więcej informacji

Możesz sprawdzić na przykład w pracy w tym dopływie 24hr time example

Answer 2

Zaakceptowanych odpowiedź jest rzeczywiście poprawna, ale w moim przypadku potrzebne elastyczność dla formatów dostosować się do różnych skalach (Pomyśl powiększania), ale także, aby zapewnić 24 godzinny zegar jest używany. Kluczem jest zdefiniowanie formatu czasu w wielu rozdzielczościach . Szczegółowe informacje znajdują się na stronie Documentation.

Mój kod:

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

chcę dodać this link do niesamowite stronie demo. Jest to plac zabaw, kiedy możesz wybrać specyfikator formatu, który potrzebujesz w swojej sprawie. Jest to bardzo przydatne, gdy nie pamiętasz/nie wiesz, jaki specyfikator formatu należy przekazać do funkcji d3.timeFormat.

Chcę również zauważyć, że jeśli masz wersję d3 4, powinieneś użyć funkcji d3.timeFormat, zamiast d3.time.format.

Answer 4

W v4,

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

pamiętać, że korzystanie d3.timeMinute - nie d3.timeMinutes