nvd3堆积面积图看起来有问题如何修复? [英] nvd3 stacked area chart looks glitchy how to fix?

问题描述

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

My stacked area chart looks like this:

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

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?

推荐答案

NVD3 图表不会沿 x 轴按从左到右的顺序对数据点进行排序，因此会出现奇怪的纵横交错形状.

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.

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

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

这是如何工作的:

• data 是来自 JSON 文件的对象数组(您将使用 browserchartdata)；

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

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

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;

Javascript Array.sort() 方法使用传入的函数来确定两个元素(a 和 b) 比较；

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;

我创建的排序函数使用数组中每个元素的 .t 变量(您用于 x 轴)来确定 a 比 b 大(因此应该在排序数组中跟随它)；

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

我在每个数据行的values数组上调用这个排序函数，然后将未排序的values数组改写，这样values数组中的对象code>data 都是按照t从小到大排序的.

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.

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

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

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