Как визуализировать набор одинаковых потоков?

Question

У меня есть данные, которые можно интерпретировать как от a до b до c:

[
  ["hello", "world", "10"],
  ["hello", "world", "10"],
  ["hello", "wazaa", "10"],
  ["bonjour", "wazaa", "30"],
]

Один и тот же поток может повторяться (первые два примера)и любая комбинация возможна.

Диаграмма, которую можно использовать для отображения этих потоков, является parallel-coordinates: всегда есть одинаковое количество столбцов, и каждый поток можно отслеживать (в отличие отна sankey, который агрегирует каждый входной столбец).

Проблема, с которой я столкнулся с parallel-coordinates, заключается в том, что несколько идентичных записей будут складываться (я полагаю), и наличие дубликатов не будет

Есть ли способ изменить ширину строки, чтобы указать, что было использовано несколько идентичных строк данных? Или обеспечить количество идентичных записей, которые будут отражены вширина (или, в худшем случае, цвет)?

Answer 1

Вы можете предварительно обработать свои данные и установить более высокое значение lineWidth для серии с повторяющимися данными:

var series = [{
            data: [0, 0, 10]
        },
        {
            data: [0, 0, 10]
        },
        {
            data: [0, 0, 10]
        },
        {
            data: [0, 0, 10]
        },
        {
            data: [0, 1, 10]
        },
        {
            data: [1, 1, 30]
        }
    ],
    j = series.length - 1,
    dataLength = series[0].data.length,
    i;

for (; j > 0; j--) {
    i = 0;
    for (; i < dataLength; i++) {
        if (series[j].data[i] === series[j - 1].data[i]) {
            if (i === dataLength - 1) {
                series[j - 1].lineWidth = series[j].lineWidth ?
                    series[j].lineWidth + 1 : 2
                series.splice(j, 1);
            }
        } else {
            i = dataLength;
        }
    }
}

Демонстрационная версия: https://jsfiddle.net/BlackLabel/4pth15yf/

API: https://api.highcharts.com/highcharts/series.line.lineWidth