, wie die Zeit auf xAchse Gebrauch zu forma d3.js

Question

auf http://bl.ocks.org/mbostock/3883245 die Demo Nach

Ich weiß nicht, wie Format Zeit auf xAchse

dies ist mein Code: 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); 

dies svg:

in svg, Zeit 12-Stunden-Uhr ist, aber meine Datum Zeit beträgt 24-Stunden-Uhr. Wie das gleiche Format auf Svg und Daten zu halten?

Jede Hilfe wird geschätzt. (Ps: Ich hoffe, dass Sie nicht mein Englisch etwas dagegen, dann ist es so schlimm.)

Answer 1

Sie können die tickFormat Funktion auf der Objektachse verwenden, wie unten

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

Die %Hhour (24-hour clock) as a decimal number [00,23] angibt. Überprüfen Sie diesen Link D3 time formatting für weitere Informationen

Sie können in diesem Nebenfluß ein funktionierendes Beispiel Besuche 24hr time example

Answer 2

Die akzeptierte Antwort ist in der Tat richtig, aber in meinem Fall musste ich die Flexibilität für die Formate auf verschiedenen Skalen anpassen (denke Zooming), sondern auch um sicherzustellen, dass die 24-Stunden-Uhr verwendet wird. Der Schlüssel besteht darin, ein Mehrfachauflösungs-Zeitformat zu definieren. Einzelheiten finden Sie auf der Seite Documentation.

Mein Code:

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

Ich möchte this link zu einem tollen Demo-Seite hinzuzufügen. Es ist ein Spielplatz, wenn Sie wählen können, was für einen Formatbezeichner Sie für Ihren Fall benötigen. Es ist sehr nützlich, wenn Sie sich nicht erinnern/wissen, was ein Formatbezeichner an Ihre d3.timeFormat Funktion übergeben soll.

Ich möchte auch feststellen, dass, wenn Sie d3 Version 4 haben, sollten Sie d3.timeFormat Funktion anstelle von d3.time.format verwenden.

Answer 4

In v4,

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

Beachten Sie, dass d3.timeMinute verwenden - nicht d3.timeMinutes