Question

我试图修改NVD3的堆积面积图示例。我可以用自己的数据绘制图表，一切正常。但是，数据解析似乎无法正常工作。就像在NVD3示例中一样，我将日期转换为Unix时间，就像在NVD3示例中一样，这些是数据中的第一个值。第二个值是计数。数据很好，但日期都是在1970年1月17日。可以看到一个例子here。

我的数据如下：

var data = [
{'values': [[1403236800, 573], [1403323200, 632], [1403409600, 691],
    [1403496000, 882], [1403582400, 898], [1403668800, 869], [1403755200, 853],
    [1403841600, 787], [1403928000, 596], [1404014400, 505], [1404100800, 877],
    [1404187200, 813], [1404273600, 816], [1404360000, 754], [1404446400, 765],
    [1404532800, 531], [1404619200, 501], [1404705600, 786], [1404792000, 840],
    [1404878400, 963], [1404964800, 857], [1405051200, 909], [1405137600, 620],
    [1405224000, 694], [1405310400, 879], [1405396800, 926], [1405483200, 895],
    [1405569600, 1044], [1405656000, 1201], [1405742400, 869], [1405828800, 757],
    [1405915200, 1048], [1406001600, 972], [1406088000, 889], [1406174400, 941],
    [1406260800, 641], [1406347200, 477], [1406433600, 538], [1406520000, 780],
    [1406606400, 873], [1406692800, 757], [1406779200, 427], [1406865600, 37]],
    'key': 'Stream1'},
{'values': [[1403236800, 782], [1403323200, 843], [1403409600, 791],
    [1403496000, 1020], [1403582400, 1059], [1403668800, 1062], [1403755200, 1231],
    [1403841600, 1235], [1403928000, 801], [1404014400, 689],
    [1404100800, 1095], [1404187200, 908], [1404273600, 972], [1404360000, 924],
    [1404446400, 775], [1404532800, 381], [1404619200, 488], [1404705600, 895],
    [1404792000, 1081], [1404878400, 1035], [1404964800, 923],
    [1405051200, 1036], [1405137600, 736], [1405224000, 803], [1405310400, 985],
    [1405396800, 1186], [1405483200, 1095], [1405569600, 1328],
    [1405656000, 1229], [1405742400, 1218], [1405828800, 787], [1405915200, 1164],
    [1406001600, 1100], [1406088000, 1197], [1406174400, 927], [1406260800, 803],
    [1406347200, 670], [1406433600, 588], [1406520000, 850], [1406606400, 780],
    [1406692800, 699], [1406779200, 488], [1406865600, 37]],
    'key': 'Stream2'},
{'values': [[1403236800, 211], [1403323200, 211], [1403409600, 294], 
[1403496000, 367], [1403582400, 373], [1403668800, 361], [1403755200, 404],
    [1403841600, 450], [1403928000, 309], [1404014400, 245], [1404100800, 328],
    [1404187200, 431], [1404273600, 329], [1404360000, 348], [1404446400, 361],
    [1404532800, 184], [1404619200, 127], [1404705600, 236], [1404792000, 277],
    [1404878400, 333], [1404964800, 347], [1405051200, 301], [1405137600, 248],
    [1405224000, 253], [1405310400, 328], [1405396800, 369], [1405483200, 330],
    [1405569600, 444], [1405656000, 429], [1405742400, 313], [1405828800, 322],
    [1405915200, 346], [1406001600, 408], [1406088000, 376], [1406174400, 293],
    [1406260800, 249], [1406347200, 246], [1406433600, 212], [1406520000, 304],
    [1406606400, 316], [1406692800, 283], [1406779200, 180], [1406865600, 13]],
'key': 'Stream3'},
{'values': [[1403236800, 209], [1403323200, 303], [1403409600, 236],
    [1403496000, 341], [1403582400, 310], [1403668800, 361], [1403755200, 342],
    [1403841600, 335], [1403928000, 196], [1404014400, 197], [1404100800, 361],
    [1404187200, 368], [1404273600, 360], [1404360000, 345], [1404446400, 313],
    [1404532800, 174], [1404619200, 205], [1404705600, 294], [1404792000, 345],
    [1404878400, 382], [1404964800, 326], [1405051200, 436], [1405137600, 274],
    [1405224000, 251], [1405310400, 330], [1405396800, 365], [1405483200, 408],
    [1405569600, 517], [1405656000, 542], [1405742400, 438], [1405828800, 451],
    [1405915200, 511], [1406001600, 521], [1406088000, 376], [1406174400, 363],
    [1406260800, 282], [1406347200, 235], [1406433600, 268], [1406520000, 352],
    [1406606400, 425], [1406692800, 371], [1406779200, 210], [1406865600, 17]],
    'key': 'Stream4'},
{'values': [[1403236800, 251], [1403323200, 368], [1403409600, 356],
    [1403496000, 469], [1403582400, 456], [1403668800, 515], [1403755200, 509],
    [1403841600, 422], [1403928000, 290], [1404014400, 328], [1404100800, 467],
    [1404187200, 437], [1404273600, 505], [1404360000, 410], [1404446400, 434],
    [1404532800, 309], [1404619200, 330], [1404705600, 458], [1404792000, 423],
    [1404878400, 478], [1404964800, 507], [1405051200, 484], [1405137600, 319],
    [1405224000, 422], [1405310400, 475], [1405396800, 412], [1405483200, 511],
    [1405569600, 536], [1405656000, 551], [1405742400, 434], [1405828800, 451],
    [1405915200, 511], [1406001600, 503], [1406088000, 449], [1406174400, 433],
    [1406260800, 300], [1406347200, 272], [1406433600, 297], [1406520000, 454],
    [1406606400, 381], [1406692800, 400], [1406779200, 212], [1406865600, 18]],
    'key': 'Stream5'}];

Javascript是：

var colors = d3.scale.category20();
keyColor = function(d, i) {return colors(d.key)};

var chart;
nv.addGraph(function() {
  chart = nv.models.stackedAreaChart()
                .useInteractiveGuideline(true)
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .color(keyColor)
                .transitionDuration(300);

  chart.xAxis
      .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

  chart.yAxis
      .tickFormat(d3.format(',f'));

  d3.select('#chart1')
    .datum(data)
    .transition().duration(1000)
    .call(chart)
    .each('start', function() {
        setTimeout(function() {
            d3.selectAll('#chart1 *').each(function() {
              console.log('start',this.__transition__, this)
              if(this.__transition__)
                this.__transition__.duration = 1;
            })
          }, 0)
      })

  nv.utils.windowResize(chart.update);
 });

  return chart;
});

我还尝试修改答案here中的内容，如下所示，但这也不起作用。

var chart;
nv.addGraph(function() {
  chart = nv.models.stackedAreaChart()
                .useInteractiveGuideline(true)
                .x(function(d) { return new Date(d[0]); })
                .y(function(d) { return d[1] })
                .color(keyColor)
                .transitionDuration(300);

  chart.xScale = d3.time.scale();
  chart.xAxis
      .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

  chart.yAxis
      .tickFormat(d3.format(',f'));

Answer 1

显然，d3使用13位unix时间戳（包括微秒），你有10位unix时间戳。试着这样做：

.tickFormat(function(d) { return d3.time.format('%x')(new Date(d*1000)) });

Answer 2

“问题”与数据有关。我将日期格式从“％m /％d /％Y”改为“％H：％M：％S”。这是代码更改：

chart.xAxis.tickFormat(function (d) {
    // changed from %x to %X
    // see https://github.com/mbostock/d3/wiki/Time-Formatting#user-content-format
    return d3.time.format('%X')(new Date(d))
});

我为您生成了一个FIDDLE。

NVD3没有正确格式化日期

2 个答案: