xAxis에서 시간 형식을 지정하는 방법 d3.js 사용

xAxis에서 시간 형식을 지정하는 방법 d3.js 사용

---

http://bl.ocks.org/mbostock/3883245 의 데모에 따르면

xAxis에서 시간을 포맷하는 방법을 모르겠습니다.

이것은 내 코드입니다 : js :

    var 데이터 = [{
            "creat_time": "2013-03-12 15:09:04",
            "record_status": "확인",
            "roundTripTime": "16"
        }, {
            "creat_time": "2013-03-12 14:59:06",
            "record_status": "확인",
            "roundTripTime": "0"
        }, {
            "creat_time": "2013-03-12 14:49:04",
            "record_status": "확인",
            "roundTripTime": "297"
        }, {
            "creat_time": "2013-03-12 14:39:06",
            "record_status": "확인",
            "roundTripTime": "31"
        }, {
            "creat_time": "2013-03-12 14:29:03",
            "record_status": "확인",
            "roundTripTime": "0"
    }];
    var margin = {위 : 20, 오른쪽 : 20, 아래 : 30, 왼쪽 : 50};
    var width = 960-margin.left-margin.right;
    var 높이 = 500-margin.top-margin.bottom;
    var parseDate = d3.time.format ( "% Y- % m- % d % H : % M : % S"). parse;
    var x = d3.time.scale ()
        .range ([0, 너비]);

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

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

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

    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 ( "너비", 너비 + 여백. 왼쪽 + 여백. 오른쪽)
        .attr ( "높이", 높이 + 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 ( "클래스", "x 축")
          .attr ( "transform", "translate (0,"+ 높이 + ")")
          .call (xAxis);

    svg.append ( "g")
          .attr ( "클래스", "y 축")
          .call (yAxis)
          .append ( "텍스트")
          .attr ( "변환", "회전 (-90)")
          .attr ( "y", 6)
          .attr ( "dy", ".71em")
          .style ( "text-anchor", "end")
          .text ( "반환 시간 (ms)");

    svg.append ( "경로")
          .datum (데이터)
          .attr ( "클래스", "라인")
          .attr ( "d", 줄);

이것은 svg입니다.

svg에서 시간은 12 시간 시계이지만 내 데이터 시간은 24 시간 시계입니다. SVG와 데이터에서 동일한 형식을 유지하는 방법은 무엇입니까?

도움을 주시면 감사하겠습니다. (ps : 제 영어를 신경 쓰지 않으 셨으면 좋겠습니다. 너무 나빠요.)

---

아래와 같이 축 객체에 tickFormat 함수를 사용할 수 있습니다.

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

이 %H지정합니다 hour (24-hour clock) as a decimal number [00,23]. 자세한 내용은 이 링크 D3 시간 형식 을 확인하십시오.

You can check out a working example in this tributary 24hr time example

---

The accepted answer is indeed correct, but in my case, I needed the flexibility for the formats to adjust to different scales (think zooming), but also to ensure the 24hr clock is used. The key is to define a multi-resolution time format. See the Documentation page for details.

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

---

I want to add this link to an awesome demo page. It is a playground when you can choose what a format specifier do you need for your case. It is very useful when you do not remember/know what a format specifier you should pass to your d3.timeFormat function.

I also want to notice, that if you have d3 version 4, you should use d3.timeFormat function, instead of d3.time.format.

---

In v4,

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

사용 d3.timeMinute하지 마십시오.d3.timeMinutes

참조 URL : https://stackoverflow.com/questions/15471224/how-to-format-time-on-xaxis-use-d3-js