nvd3堆叠面积图看起来不好如何解决？

enter image description here

我使用的数据具有相同数目的值的和是就像在示例。我使用的数据是：http://pastebin.com/D07hja76

我使用的代码也从选择几乎相同APPART：

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

我怎样才能得到图表看的权利？

来源

2014-01-10 Akshat

我敢肯定，问题只是你的数据没有被排序，所以路径在它自己之上跳来跳去。我试图弄清楚如何告诉NVD3对数据进行排序，然后我会发布一个完整的答案。 – AmeliaBR

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）如何比较阵列的排序的版本;
我创建了排序函数使用每个元素.t变量（您使用的是X轴哪个）阵列中，以确定是否a是大于b（因此应后进去排序数组）;
我叫values阵列中的每个数据线对这种功能，然后写在无序values阵列，使data对象都最终与他们的价值观根据t从最小的分选到最大。

我在NVD3的“实时代码”网站上试用了它的数据，它看起来很好。

来源

2014-01-10 02:59:16 AmeliaBR

太棒了！我有这个在我脑海中，但我确定nvd3自己排序的一切！非常感谢你，尽管答案详尽而且详细。 – Akshat

不需要赋值 - 'Array.prototype.sort'将就地对数组进行排序。 – Alnitak

nvd3堆叠面积图看起来不好如何解决？

回答

相关问题