nvd3堆积面积图看起来如何修复？

Question

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

我使用的数据具有相同数量的值,就像在示例中一样.我使用的数据是: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;
});

如何让图表看起来正确？

Answer 1

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

我假设有一些方法可以告诉NVD3对数据进行排序,但它们旁边没有文档,我无法快速解决.相反,您可以使用此函数对数据进行排序,然后再将其添加到图表中:

   data.forEach(function(d,i){ 

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

这是如何工作的:

• data是JSON文件中的对象数组(您可以使用browserchartdata);

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

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

• 我创建的sort函数使用.t数组中每个元素的变量(你用于x轴)确定是否a大于b(因此应该在排序数组中继续);

• 我在values每个数据行的数组上调用此sort函数,然后对未排序的values数组进行写操作,以便data所有对象最终根据其从最小到最大的值排序t.

我在NVD3的"实时代码"网站上尝试了你的数据,它看起来很好.