如何在NVD3 lineChart中指定域x轴 [英] How can I specify a domain x-axis in NVD3 lineChart

问题描述

我想在nvd3中定义一个lineChart，在x轴上有一个域缩放。我不能让它工作。第一个问题是voronoi代码爆炸。但即使我关闭voronoi，x轴仍然只显示-1到1的范围，而不是我的域值。

I am trying to define a lineChart in nvd3 with a domain scale on the x-axis. I can't get it to work. The first issue is that the voronoi code blows up. But even if I turn voronoi off, the x-axis still just shows a range of -1 to 1, instead of my domain values.

我想一个解决方法是给x轴值分配数字，然后使用tick函数来绘制文本。但我想弄清楚为什么我不能使它与一个顺序量表。

I think a workaround would be to assign numbers to the x-axis values, and then use a tick function to draw the text. But I want to figure out why I can't make it work with an ordinal scale.

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

Below is the code I have tried. My data works with other models, so I think the data is ok. I tried using the xDomain function to set the domain, and I also tried using the xAxis property to set a custom scale. Neither one seemed to do anything.

代码：

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;
        });

推荐答案

我认为问题出在模型.scatter definition：

I think the problem lies in these lines in the models.scatter definition:

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

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

显然，这将禁止此类型中x或y刻度的任何序数的图表（它是线图和大多数其他非条形图的基础）。

Obviously this will disallow any ordinal scales for the x or y scales in this type of chart (which underlies the line chart and most of the other non-bar charts it seems).

这篇关于如何在NVD3 lineChart中指定域x轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！