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

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

本文关键字：直方图 d3 使用 输出 拟合 百分比 排序      更新时间：2023-09-26

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

该线与基本/原始直方图 http://bl.ocks.org/daluu/f58884c24ff893186416 一样适合默认直方图。我能够按降序频率对直方图进行排序，尽管这样做时，我切换了 x 刻度(从线性到有序(。此时，我似乎无法将线正确映射到排序的直方图。就视觉表示而言，它应类似于以下示例：

  • 上面引用的我的要点注释中的 Excel 屏幕截图
  • 帕累托图在此SO帖子中排序的直方图
  • 此处使用 D3 制作的帕累托图(类似于但不完全是排序直方图(

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

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

任何帮助表示赞赏。

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

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"并向备用刻度线添加一个函数(不久前从 d3.js 中的交替刻度填充中得到了该解决方案(。

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

请参阅包含上述所有内容的小提琴。如果你想使用它，我建议添加一个检查以避免用户能够切换条形和行(在代码中留下注释......应该是微不足道的(

而不是对y进行排序。

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

你应该对 x 进行排序

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

此处的工作代码

相关文章：