使用d3将累积百分比线拟合到排序后的直方图，以获取帕累托直方图

Question

到目前为止，这就是我所拥有的： https : //gist.github.com/daluu/fc1cbcab68852ed3c5fa和http://bl.ocks.org/daluu/fc1cbcab68852ed3c5fa 。 我正在尝试复制Excel功能。

该行适合默认直方图，就像在基本/原始http://bl.ocks.org/daluu/f58884c24ff893186416中一样 。 而且我能够以降序对直方图进行排序，尽管这样做是将x比例切换（从线性到有序）。 我现在似乎无法正确地将线映射到排序后的直方图。 就视觉表示而言，它应类似于以下示例：

• 上面引用的要点注释中的Excel屏幕截图
• 该SO帖子中的pareto图表排序的直方图
• 此处使用d3生成的pareto图表（类似于但不完全是排序的直方图）

使其余部分正常工作的最佳设计方法是什么？ 我是否应该从单一的x刻度开始，而不必从线性转换为有序？ 如果是这样，我不确定如何使用序数比例尺正确应用直方图布局，或者如何不使用线性x比例尺作为直方图布局的输入源并仍然获得所需的输出。

到目前为止，我在代码中使用了相同的序数标度，这条线看起来还可以，但是那并不是我期望看到的曲线。

任何帮助表示赞赏。

Answer 1

该行的主要问题是，在对条形进行排序后，需要重新计算累积分布，或者如果您想获取静态pareto图表，则需要按照目标排序顺序来计算累积分布。 为此，我创建了一个小函数来进行此计算：

function calcCDF(data){
  data.forEach(function(d,i){
      if(i === 0){
      d.cum = d.y/dataset.length
    }else{
      d.cum = (d.y/dataset.length) + data[i-1].cum
    }
  })
  return data
}

就我而言，我每次切换pareto排序并重新计算d.cum属性。 从理论上讲，一个可以创建两个累积的dist属性。 iedcum用于常规的有序分布，对已排序的累积值说d.ParetoCum，但是我在工具提示上使用d.cum并决定反对。

对于每个轴，我使用的是单个序数刻度，我认为这更干净，但需要做一些工作才能使标签对于数字范围有意义，因为刻度线和标签不再像线性容器那样划定垃圾箱。规模。 我在这里的解决方案是仅将数字范围用作刻度线，例如“ 1-1.99”，并向备用刻度线添加一个函数（前一阵子从d3.js中的交替刻度填充中得到该解决方案）。

对于条形排序，我将使用此d3示例作为参考，以防您需要在一个更简单/更小的示例的上下文中进行理解。

看到结合了以上所有内容的小提琴 。 如果您想使用它，我建议您添加一个检查，以避免用户能够同时关闭横条和横条（在代码中留下一个注释……应该是微不足道的）

Answer 2

而不是对y进行排序。

data.sort(function(a,b){ return b.y - a.y;});

您应该对x进行排序

data.sort(function(a,b){ return a.x - b.x;});

这里的工作代码