如何可视化一组相同的流程？

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