javascript - 如何在 NVD3 lineChart 中指定域 x 轴

Question

我试图在 nvd3 中定义一个折线图，其 x 轴上有域刻度。我无法让它工作。第一个问题是 voronoi 代码崩溃了。但即使我关闭 voronoi，x 轴仍然只显示 -1 到 1 的范围，而不是我的域值。

我认为解决方法是将数字分配给 x 轴值，然后使用刻度函数来绘制文本。但我想弄清楚为什么我不能让它在序数尺度上工作。

下面是我尝试过的代码。我的数据与其他模型兼容，所以我认为数据没问题。我尝试使用 xDomain 函数来设置域，并且还尝试使用 xAxis 属性来设置自定义比例。两人似乎都没有做任何事情。

代码:

var lineData = [{ "key": "% Kernel CPU", "values": [{ "x": "Exe1", "y": 6.693271 }, { "x": "Exe2", "y": 0.8129451 }, { "x": "Exe3", "y": 71.3511437 }] },
            { "key": "% User CPU", "values": [{ "x": "Exe1", "y": 93.7063302 }, { "x": "Exe2", "y": 23.158042000000002 }, { "x": "Exe3", "y": 74.19397850000001 }] }];
        var xdomain = ["Exe1", "Exe2", "Exe3"];

        $('#test').append('<svg style="width:100%;height:400px;"></svg>');

        nv.addGraph(function () {
            var chartObj = nv.models.lineChart();
            chartObj.lines.scatter.useVoronoi(false);

            chartObj.xAxis.tickFormat(function (d) {
                if (d.length > 15) {
                    return d.substring(0, 13) + '...';
                }
                return d;
            });

            chartObj.yAxis.tickFormat(d3.format('.1f'));

            //Attempt1:
            chartObj.xDomain(xdomain);
            //Attempt2: 
            //var xScale = d3.scale.ordinal();
            //xScale.domain(xdomain);
            //chartObj.xAxis.scale(xScale);
            //Attempt3:
            //chartObj.xAxis.domain(xdomain);

            d3.select('#test svg').datum(lineData)
                       .transition().duration(500).call(chartObj);
            return chartObj;
        });

Answer 1

我认为问题出在 models.scatter 定义中的这些行:

  if ( isNaN(x.domain()[0])) {
      x.domain([-1,1]);
  }

  if ( isNaN(y.domain()[0])) {
      y.domain([-1,1]);
  }

显然，这将不允许此类图表中的 x 或 y 刻度(它是折线图和大多数其他非条形图的基础)中的任何序数刻度。