如何在非丑陋模式下在X轴上绘制时间？

Question

这个丑:

我需要不丑的东西。时间序列很常见，但我看不到如何使用 ISO 日期构建 "plug and play" 图表。

也许一个等价的问题是"How to use d3-scalelinear/Non-numeric range/Date with NVD3?"
(or d3-scaletime)

备注

这是主要代码：

    nv.addGraph(function () {

        var chart = nv.models.discreteBarChart()
          //.x( d=> d.label )  // very Ugly!
          .x( d=> { 
                let dd = new Date(d.label); 
                return d3.time.format('%b %d')(dd)  
           })  // Ugly, because need to jump some days before show next
          .y( d=> d.value )
          .staggerLabels(true) // not solved

        d3.select('#chart svg')
          .datum(data)
          .transition().duration(500)
          .call(chart);

        nv.utils.windowResize(chart.update); // necessary?

        return chart;
    }); // \nv.add

我尝试了一些变化，没有一个工作正常（都很丑）。

我的数据是

    [ {  
      key: "ExampleData",
      color: "#ff7f0e",  
      values: [
         { label: "2019-03-28", value: 7.8389242307 },
         { label: "2019-03-29", value: 9.4185632435 },
         { label: "2019-03-30", value: 7.3553138346 },
         { label: "...", value: ... }
      ]
    } ];

值数组有 ~100 项。

有问题的解决方法

这个（不优雅的）解决方案丢失了工具提示，如图所示，

var chart = nv.models.discreteBarChart()
   .x( d=> d.label )
   .y( d=> d.value )
   .staggerLabels(true);
chart.xAxis
  .showMaxMin(false)
  .tickFormat(function(d) {
    let dd =  new Date(d)
    return (dd.getDay()==1)? d3.time.format('%x')(aux): '';
  });  // each 7 days format, else empty string

这个其他解决方案，http://jsfiddle.net/ee2todev/3Lu46oqg/ 看起来很好很优雅，使用 d3.scale.ordinal().domain(valuesForXAxis).rangePoints([0,width])，但不是 NVD3，是纯 D3...

NVD3 Live Line Plus Bar Chart看起来不错（！），但是输入的数据不是ISO日期，是个很奇怪的东西（unix时间？）这是一个序数域并且用非丑陋的算法自动显示。

Answer 1

您可以尝试使用 historicalBarChart，它可以在 x 轴上显示时间序列。

  var chart = nv.models.historicalBarChart()
   .x(function(d) { return d[0]})
   .y(function(d) { return d[1]})
   .useInteractiveGuideline(true);

  ...

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

工作示例是 here。

如何在非丑陋模式下在X轴上绘制时间？

How to plot time on the X-axis in non-ugly mode?

nvd3.js

备注

有问题的解决方法