59

http://bl.ocks.org/mbostock/3883245のデモによると

xAxisで時間をフォーマットする方法がわかりません

これは私のコードです：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 = {上：20、右：20、下：30、左：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（ "左"）;

    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）;

これはsvgです： ここに画像の説明を入力してください

svgでは、時間は12時間制ですが、私のデータでは24時間制です。svgとデータで同じフォーマットを維持する方法は？

どんな助けでも大歓迎です。（ps：私の英語を気にしないでください、それはとても悪いです。）

4

5 に答える 5

32

受け入れられた答えは確かに正しいですが、私の場合、フォーマットをさまざまなスケールに調整する柔軟性が必要でした（ズームを考えてください）が、24時間時計が確実に使用されるようにする必要がありました。重要なのは、複数解像度の時間形式を定義することです。詳細については、ドキュメントのページを参照してください。

私のコード:

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);
于 2016-01-28T00:37:42.870 に答える