1

我正在尝试在 nvd3 中定义一个 lineChart，在 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;
        });
4

1 回答 1

0

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

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

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

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

于 2013-08-29T16:34:33.880 回答