Установите совокупную процентную линию на сортированный вывод гистограммы с d3 для гистограммы диаграммы парето

Question

Это то, что у меня есть до сих пор: https://gist.github.com/daluu/fc1cbcab68852ed3c5fa и http://bl.ocks.org/daluu/fc1cbcab68852ed3c5fa. Я пытаюсь реплицировать функциональность Excel.

Линия соответствует гистограмме по умолчанию, которая отлично подходит как в базе/оригинале http://bl.ocks.org/daluu/f58884c24ff893186416. И я могу сортировать гистограмму в нисходящей частоте, хотя при этом я переключил x масштабов (от линейного до порядкового). Кажется, я не могу правильно отобразить линию на отсортированную гистограмму. Это должно выглядеть следующим образом примеры с точки зрения визуального представления:

• скриншот Excel в comment in my gist указанным выше
• Парето диаграммы отсортирован гистограмму в 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;}); 

вы должны сортировка х

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

Рабочего кода here