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

Question

这很丑：

我需要不难看的东西。时间序列很常见，但是我看不到如何用ISO日期构建“即插即用”图表。

也许等效的问题是“如何在NVD3中使用d3-scalelinear/Non-numeric range/Date？”
（或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: ... }
      ]
    } ];

值Array包含约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

您可以尝试使用historyBarChart，它可以在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。