累积折线图误差 nvd3

Question

我正在尝试创建累积折线图。

但我现在对 nvd3 或 d3 了解不多。

那么我在这里遗漏了什么？

我创建了jsfiddle，

我的数据是

var lineChartData = [
      {
        key : "Passed",
        values :[
          { x : "Module A", y : 10},
          { x : "Module B", y : 12},
          { x : "Module C", y : 14},
          { x : "Module D", y : 2}
        ]
      },
      {
        key : "Failed",
        values :[
          { x : "Module A", y : 2},
          { x : "Module B", y : 3},
          { x : "Module C", y : 0},
          { x : "Module D", y : 4}
        ]
      }
    ];

我的图表代码是这样的

nv.addGraph(function() {
      var chart = nv.models.cumulativeLineChart();



      var d3chart = d3.select('#chart svg')
          .datum(lineChartData)
          .transition().duration(500)
          .call(chart);


      nv.utils.windowResize(chart.update);

      return chart;
    });

我不知道如何在 xAxis "Module A"、"Module B" 和其他模块上仅将字符串作为字符串。

会有两行“通过”和“失败”。

获取图表需要进行哪些设置。

Answer 1

我认为你需要像这样格式化你的 x xAxis：

chart.xAxis.axisLabel("Modules").tickFormat(function (d) { return lineChartData[0].values[d].x; });