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

Question

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

该线与基本/原始http://bl.ocks.org/daluu/f58884c24ff893186416 中的默认直方图非常吻合。而且我能够以降频对直方图进行排序，尽管这样做时，我切换了 x 尺度（从线性到序数）。在这一点上，我似乎无法正确地将线映射到排序的直方图。就视觉表示而言，它应该类似于以下示例：

• 上面引用的comment in my gist 中的 Excel 屏幕截图
• this SO post 中的帕累托图排序直方图
• 使用 d3 here 制作的帕累托图（类似于但不完全是排序直方图）

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

使用与我到目前为止的代码相同的序数比例，这条线看起来不错，但它不是我期望看到的曲线。

任何帮助表示赞赏。

Answer 1

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

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
}

就我而言，我每次都打开/关闭帕累托排序并重新计算 d.cum 属性。理论上可以创建两个累积的 dist 属性开始；即 d.cum 用于常规有序分布，d.ParetoCum 用于排序累积，但我在工具提示上使用 d.cum 并决定反对。

根据轴，我使用的是我认为更清晰的单个序数比例，但需要一些工作来使标签对数字范围有意义，因为刻度线和标签不再像人们那样描绘垃圾箱带有线性刻度。我的解决方案是仅使用数字范围作为刻度线，例如"1 - 1.99" 并添加一个函数来替代刻度线（不久前从 Alternating tick padding in d3.js 获得了该解决方案）。

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

请参阅包含上述所有内容的fiddle。如果你想使用它，我建议添加一个检查以避免用户能够同时关闭条和线（在代码中留下一个注释......应该是微不足道的）

Answer 2

而不是对 y 进行排序。

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

你应该对 x 进行排序

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

工作代码here