Question

我正在尝试在xvd轴上使用域缩放定义nvd3中的lineChart。我无法让它发挥作用。第一个问题是voronoi代码爆炸了。但即使我关闭voronoi，x轴仍然只显示-1到1的范围，而不是我的域值。

我认为解决方法是将数字指定给x轴值，然后使用tick函数绘制文本。但是我想弄清楚为什么我不能按顺序进行工作。

以下是我尝试过的代码。我的数据与其他模型一起使用，所以我认为数据还可以。我尝试使用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标度的任何序数标度（它位于折线图和大多数其他非条形图的基础上）。

如何在NVD3折线图中指定域x轴

1 个答案: