3

我的堆积面积图如下所示：

在此处输入图像描述

我使用的数据具有相同数量的值，就像在示例中一样。我使用的数据位于： http: //pastebin.com/D07hja76

我使用的代码也几乎与选择器相似：

var colors = d3.scale.category20();
keyColor = function(d, i) {return colors(d.key)};

nv.addGraph(function() {
  chart = nv.models.stackedAreaChart()
                .useInteractiveGuideline(true)
                .x(function(d) { return d.t })
                .y(function(d) { return d.v })
                .color(keyColor)
                .transitionDuration(300)

  chart.xAxis
    .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

  chart.yAxis
    .tickFormat(d3.format(',.0f'));

  d3.select('#browserBreakdown')
    .datum(browserchartdata)
    .transition().duration(500)
    .call(chart)
    .each('start', function() {
        setTimeout(function() {
            d3.selectAll('#browserBreakdown *').each(function() {
              if(this.__transition__)
                this.__transition__.duration = 1;
            })
          }, 0)
      })

  nv.utils.windowResize(chart.update);

  return chart;
});

我怎样才能让图表看起来正确？

4

1 回答 1

8

NVD3 图表不会将您的数据点沿 x 轴按从左到右的顺序排序，因此您会得到奇怪的纵横交错形状。

我认为有一些方法可以告诉 NVD3 对数据进行排序，但他们几乎没有文档，我无法快速弄清楚。相反，您可以在将数据添加到图表之前使用此函数对数据进行排序：

   data.forEach(function(d,i){ 

      d.values = d.values.sort(
          function(a,b){
             return +a.t -b.t;
          }
      );
   });

这是如何工作的：

  • data是 JSON 文件中的对象数组（您将使用browserchartdata）；

  • JavascriptArray.forEach(function(){})方法为数组的每个元素调用传入的函数，并将数组元素及其索引传递给该函数；

  • JavascriptArray.sort()方法使用传入的函数创建数组的排序版本，以确定两个元素 (a和b) 的比较方式；

  • 我创建的排序函数使用.t数组中每个元素的变量（您将其用于 x 轴）来确定是否a大于b（因此应该在排序后的数组中跟踪它）；

  • 我在每条数据行的数组上调用这个排序函数values，然后重写未排序的values数组，这样data所有对象最终的值都按照t.

我在 NVD3 的“实时代码”站点上使用您的数据进行了尝试，它看起来不错。

于 2014-01-10T02:59:16.113 回答