nvd3堆叠面积图看起来glitchy如何解决？ [英] nvd3 stacked area chart looks glitchy how to fix?

问题描述

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

我使用的数据具有相同数量的值，就像在示例中一样。我使用的数据位于： 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 return dt}）
 .y（function（d）{return dv}）
 .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 500）
 .call（chart）
 .each（'start'，function（）{
 setTimeout（function（）{
 d3.selectAll（'＃browserBreakdown *'） .each（function（）{
 if（this .__ transition__）
 this .__ transition __。duration = 1; 
}）
}，0）
}） b 
 $ b nv.utils.windowResize（chart.update）; 
 
 return chart; 
}）; 
  

如何获得图表？

解决方案

NVD3图表不会将您的数据点按照从左到右的顺序排列在x轴上，因此您会得到奇怪的交叉形状。 / p>

我假设有一些方法告诉NVD3对数据进行排序，但是它们没有文档，我无法快速计算出来。您可以使用此函数将数据之前添加到图表中：

  data.forEach（function（d，i）{
 
 d.values = d.values.sort（
 function（a，b）{
 return + at -bt; 
} 
）; 
}）; 
  

这是如何工作的：

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




• JavaScript Array.forEach（function（）{}）方法调用传入函数，并将该函数的数组元素及其索引传递给该数组;




• Javascript Array.sort （ a 和）创建一个数组的排序版本使用传入的函数来确定两个元素b c>）比较;




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




• / code>数组，然后写入未排序的值数组，以便 data 所有结果都是根据 t 从最小到最大排序的值。

我在NVD3的live code网站上使用了你的数据，看起来不错。

My stacked area chart looks like this:

The data I used has the same number of values and is just like in the example. THe data I used is at : http://pastebin.com/D07hja76

The code I use is also almost similar appart from the selector:

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

How can I get the chart to look right?

解决方案

The NVD3 chart doesn't sort your data points into a left-to-right order along your x axis, so you're getting the strange criss-crossing shape.

I assume there is some way to tell NVD3 to sort the data, but they have next to no documentation and I couldn't figure it out quickly. Instead, you can use this function to sort the data before you add it to the chart:

   data.forEach(function(d,i){ 

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

How this works:

• data is the array of objects from the JSON file (you would use browserchartdata);

• the Javascript Array.forEach(function(){}) method calls the passed-in function for each element of the array, and passes that function the element of the array and its index;

• the Javascript Array.sort() method creates a sorted version of an array using the passed-in function to determine how two elements (a and b) compare;

• the sort function I created uses the .t variable (which you're using for the x-axis) from each element in your array to determine whether a is bigger than b (and therefore should go after it in the sorted array);

• I call this sort function on the values array of each data line, and then write-over the unsorted values array, so that the objects in data all end up with their values sorted from smallest to largest according to t.

I tried it with your data on NVD3's "live code" site, and it looks fine.

这篇关于nvd3堆叠面积图看起来glitchy如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！