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屏幕截图
pareto图表在this SO post
用d3 here

使剩余部分工作的最佳设计方法是什么？我应该以单个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属性;即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

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

2 个答案: