如何减少d3中的碎片数据？

Question

我有很多的值，并且想要想象这个总和的零碎。

例如，我有值1, 1, 1, 2, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 7, 8, 8, 10，所以和86。现在，我想想象一下这86是如何从单个值构建的。目标是看看它的构建，如何从许多小的，或从不太大的价值抱怨。

在现实中，我有大约20000的价值。

Soo，我想要的是一个面积或线的斜线，其中x轴是线性的，从小数到值集中的最大数(在这个例子中是SO1到10 )，y轴代表由这个大小的值所产生的部分和。

对于1-10个数字来说，简单地为每个数字制作一个条形图很容易，如下所示：

              #                
              #                
              #                
           #  #        #       
           #  #        #       
           #  #        #       
           #  #        #       
           #  #  #     #       
           #  #  #     #       
           #  #  #     #     # 
           #  #  #     #     # 
           #  #  #     #     # 
           #  #  #     #     # 
           #  #  #  #  #     # 
           #  #  #  #  #     # 
           #  #  #  #  #     # 
           #  #  #  #  #     # 
  #        #  #  #  #  #     # 
  #  #     #  #  #  #  #     # 
  #  #     #  #  #  #  #     # 
  1  2  3  4  5  6  7  8  9  10

但在我的例子中，x轴是线性的，我有10到100000之间的各种值。

所以我有moar值和更大的x比例尺，然后是宽度中的像素。现在计算这个图表的最佳方法是什么。我的问题不是如何实际绘制图表，而是如何减少值？

我只需取x轴上的每个像素，得到数据的对应值，计算和，然后画一条线。但它似乎既低效又不雅致！如果我有两个值很大的列和一个没有数据的像素宽度列，它也可能导致硬中断。如果有一种方式来想象它的“流动”，那就太好了。

那么，有没有更好的方法来计算我的图表呢？我想我的艾迪会把图表变形。有什么办法可以防止这种情况发生吗？我如何在这些值之间添加“流”呢？

谢谢你帮忙！

Answer 1

您可以在间隔内拆分数据。不要为每个值显示一列，而是为每个间隔显示一列。根据可用的大小设置间隔的数量。

粗略的想法：

var intervalCount = 20;

var myValues = [ 0,1,1,2,500,5000,10000,10001,10002, 10002];

var min = Math.min.apply(null, myValues);
var intervalSize = (Math.max.apply(null, myValues) - min)/intervalCount;

var myUpdatedValues = [];
for (var i=0; i<intervalCount; i++) myUpdatedValues.push(0);

myValues.forEach(function(value){
  myUpdatedValues[Math.floor((value-min)/intervalSize)]++;
});