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

Question

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

该线与 base/original http://bl.ocks.org/daluu/f58884c24ff893186416 中的默认直方图吻合得很好。而且我能够按降频对直方图进行排序，尽管这样做时，我切换了 x 尺度（从线性到有序）。此时我似乎无法将线正确映射到排序的直方图。就视觉表示而言，它应该类似于以下示例：

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

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

对我目前的代码使用相同的序数标度，这条线看起来不错，但它不是我期望看到的曲线。

感谢任何帮助。

Answer 1

而不是对 y 进行排序。

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

你应该对 x

进行排序

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

工作代码here

Answer 2

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

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
}

在我的例子中，我每次切换帕累托排序 on/off 并重新计算 d.cum 属性。理论上可以创建两个累积的 dist 属性作为开始；即 d.cum 用于常规有序分布，并说 d.ParetoCum 用于排序的累积，但我在工具提示上使用 d.cum 并决定反对。

在轴上，我使用的是我认为更清晰的单一序数刻度，但需要做一些工作才能使标签对数字范围有意义，因为刻度线和标签不再将垃圾箱描绘成一个会得到线性刻度。我的解决方案是只使用数字范围作为刻度线，例如“1 - 1.99”并添加一个功能来替代刻度线（不久前从 Alternating tick padding in d3.js 获得该解决方案）。

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

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

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

Fit the cumulative percentage line to the sorted histogram output with d3 for a pareto chart histogram

javascript

histogram

d3.js

pareto-chart

cumulative-line-chart