自定义 parcats plotly.js 图表的悬停

Question

我使用了 plotly.js parcats 图表来制作顺序散基图（例如 https://github.com/EE2dev/sequence-explorer）。以下是显示测验之间成绩变化的示例 parcats：

var trace1 = {
  type: 'parcats',
  hoveron: 'color',
  dimensions: [
    {
      label: 'Quiz 1',
      values: ['Black', 'Black', 'Black', 'Brown', 'Brown', 'Brown', 'Red', 'Brown'],
    },
    {
      label: 'Quiz 2',
      values: ['Brown', 'Brown', 'Brown', 'Brown', 'Brown', 'Blue', 'Blue', 'Blue'],
    },
    {
      label: 'Quiz 3',
      values: ['Female', 'Female', 'Female', 'Male', 'Female', 'Male', 'Male', 'Male'],
    },
  ],
};

var data = [ trace1 ];

var layout = {width: 600};

Plotly.newPlot('myDiv', data, layout);

当我将鼠标悬停在一条路径上时，从 'Quiz 1' 到 'Quiz 3' 的完整路径突出显示，但我想要的只是 'Quiz 1' 到 'Quiz 2' 之间的路径为了突出。我试过悬停但没有任何改变。

这是fiddle

var trace1 = {
  type: 'parcats',
  hoveron: 'color',
  dimensions: [
    {
      label: 'Quiz 1',
      values: ['Black', 'Black', 'Black', 'Brown', 'Brown', 'Brown', 'Red', 'Brown'],
    },
    {
      label: 'Quiz 2',
      values: ['Brown', 'Brown', 'Brown', 'Brown', 'Brown', 'Blue', 'Blue', 'Blue'],
    },
    {
      label: 'Quiz 3',
      values: ['Female', 'Female', 'Female', 'Male', 'Female', 'Male', 'Male', 'Male'],
    },
  ],
};

var data = [ trace1 ];

var layout = {width: 600};

Plotly.newPlot('myDiv', data, layout);

<head>
  <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv"></div>
</body>

有没有办法自定义悬停功能？

Answer 1

据我了解，Parallel Categories Diagram 旨在处理整条线，它不具备 select 单个线段的能力。

但是，还有另一个图表看起来很相似，但侧重于各个部分。这就是Sankey Diagram。但它需要重新排列原始数据以准确指示各个值在每个段上的变化情况。

设置type参数为sankey。
在 label 参数中，我们按顺序列出图表中出现的所有值。首先是第一个测验 (Black、Brown、Red)，然后是第二个 (Brown、Blue)，最后是第三个 (Female, Male).
因此，我们将所有值都转换为数组元素，因此我们可以通过它们的索引访问它们。例如，第一个测验的 Brown 的索引为 1，第二个测验的 Brown 的索引为 3 （数组中的索引从零开始）。然后我们在 source 和 target 参数中使用这些索引。
link 中的值描述了图表中的所有段。为方便起见，我将它们按列排列。例如，第一列 0, 3, 3 表示 Quiz 1 中的 Black （source 中的索引 0 和 [=33 中的 Black =]（target 中的索引 3）有 3 位参与者（value 中的 3）。

例如：https://jsfiddle.net/glebkema/subnqp8v/

var trace1 = {
  type: 'sankey',
  node: {
    pad: 15,
    thickness: 20,
    line: {
      color: "black", 
      width: 0.5
    },
    label: [
      'Black', 'Brown', 'Red',  // Quiz 1
      'Brown', 'Blue',          // Quiz 2
      'Female', 'Male'          // Quiz 3
    ],
    color: "blue",
  },
  link: {     
    //        Quiz 1 -> Quiz 2                  Quiz 2 -> Quiz 3 
    //        Quiz 1: Black Brown Red  Brown    Quiz 2: Brown  Brown Blue
    source: [         0,    1,    1,   2,               3,     3,    4   ],
    //        Quiz 2: Brown Brown Blue Blue     Quiz 3: Female Male  Male    
    target: [         3,    3,    4,   4,               5,     6,    6   ],
    value:  [         3,    2,    2,   1,               4,     1,    3   ],
  },
};

var data = [ trace1 ];

var layout = {width: 600};

Plotly.newPlot('myDiv', data, layout);

<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="myDiv"></div>

Answer 2

不幸的是，我认为在这个特定的 parcats 绘图图表上这是不可能的。

创建此 parcats 图表时，它会为每个“ROW”生成一个 svg path，当我说“ROW”时，您可以这样理解它：

第 1 行：黑色 - 棕色 - 女
第 2 行：棕色 - 棕色 - 女性
第 3 行：棕色 - 棕色 - 男性
第 4 行：棕色 - 蓝色 - 男性
第 5 行：红色 - 蓝色 - 男性

这样，我们可以说您的图表有 5 个“行”。

正如我之前所说，每个“行”都是一个 SVG 路径，如下所示：

<path class="path" stroke-opacity="1" fill="#1f77b4" fill-opacity="0.6"
stroke="lightgray" stroke-width="0.2" d="M 40,0l16,0 C56,0 544,4 544,
4l16,0 C560,4 1048,4 1048,4l16,0 l0,95.25 l -16,0 C1048,99.25 560,
99.25 560,99.25l-16,0 C544,99.25 56,95.25 56,95.25l-16,0 Z"></path>

因此，当您悬停此路径时，它会更改 fill-opacity、stroke 和 stroke-width，如下所示：

<path class="path" stroke-opacity="1" fill="#1f77b4" fill-opacity="0.8"
stroke="white" stroke-width="0.3" d="M 40,0l16,0 C56,0 544,4 544,
4l16,0 C560,4 1048,4 1048,4l16,0 l0,95.25 l -16,0 C1048,99.25 560,
99.25 560,99.25l-16,0 C544,99.25 56,95.25 56,95.25l-16,0 Z"></path>

因此，当您将鼠标悬停在 'Quiz 1' 到 'Quiz 2' 路径上时，不可能只突出显示它。

您在这里可以做的是使用 sankey 图表类型：

var trace1 = {
  type: "sankey",
  orientation: "h",
  node: {  
   groups: ["Quiz 1", "Quiz 2", "Quiz 3"],
   label: ["Black", "Brown", "Red", "Brown", "Blue", "Female", "Male"],
   color: ["blue", "blue", "blue", "blue", "blue", "blue", "blue"]
  },
  link: {
    source: [0,1,1,1,2,3,3,3,4,4],
    target: [3,3,3,4,4,5,5,6,6,6],
    value:  [3,1,1,2,1,3,1,1,2,1]
  }
};

var data = [ trace1 ];

var layout = {
   title: {
      text:'SANKEY Title',
      font: {
         family: 'Courier New, monospace',
         size: 24
      },
   },
   annotations: [{
      text: 'QUIZ 1',
      x: 0.0,
      y: 1.1,
      showarrow: false,
      font: {size: 12}
    }, 
    {
      text: 'QUIZ 2',
      x: 0.5,
      y: 1.1,
      showarrow: false,
      font: {size: 12}
    }, 
    {
      text: 'QUIZ 3',
      x: 1.0,
      y: 1.1,
      showarrow: false,
      font: {size: 12}
    }],
   width: 600,
};

Plotly.newPlot('myDiv', data, layout);

<head>
  <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv"></div>
</body>

如您所见，它与 parcats 图表并不完全相同，但它可以完成工作。

关于这张图表的一些信息：

与 parcats 不同，它为图表的每个部分创建一个 svg path，因此每个 path.

需要说明的是，第 1 行：黑色 - 棕色 - 女性现在有两个 svg paths，例如：

<!-- Black - Brown PATH -->
<path class="sankey-link" d="M30,1.9895196601282805e-13C603.5,
1.9895196601282805e-13 603.5,15.000000000000114 1177, 15.000000000000114L1177,
105.00000000000011C603.5,105.00000000000011 603.5,90.0000000000002 30,90.0000000000002Z" 
style="stroke: rgb(68, 68, 68); stroke-opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 0.2;
stroke-width: 0; opacity: 1;"></path>

<!-- Brown - Female PATH -->
<path class="sankey-link" d="M1207,15.000000000000114C1780.5,
15.000000000000114 1780.5,15.000000000000142 2354,15.000000000000142L2354,
105.00000000000014C1780.5,105.00000000000014 1780.5,
105.00000000000011 1207,105.00000000000011Z" style="stroke: rgb(68, 68, 68);
stroke-opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 0.2; stroke-width: 0; opacity: 1;"></path>

此图表需要具有 Link 字段，并具有特定值（source、target 和 value）。您可以查看有关此选项的更多信息 here.
您可以编辑和自定义此图表中的标签。您可以查看更多相关信息 here and here.

自定义 parcats plotly.js 图表的悬停

Customise hover of parcats plotly.js chart

javascript

plotly

plotly.js