orb*_*tal 9 javascript plotly plotly.js
我使用了一个 plotly.js parcats 图表来制作一个连续的 sankey （例如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);
当我将鼠标悬停在一条路径上时，从“测验 1”到“测验 3”的完整路径会突出显示，但我希望仅突出显示“测验 1”到“测验 2”之间的路径。我尝试悬停，但没有任何改变。
这是小提琴
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>有没有办法自定义悬停功能？
不幸的是，我相信在这个特定的 parcats 图上这是不可能的。
创建此 parcats 图表时，它会path为每个“ROW”生成一个 svg，当我说“ROW”时，您可以理解它是这样的：
这样，我们可以说您的图表有 5 个“ROWS”。
正如我之前所说，每个“ROW”都是一个 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>
因此，当您将鼠标悬停时，不可能仅突出显示“测验 1”到“测验 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 图表并不完全相同，但它可以完成工作。
有关此图表的一些信息：
path与 parcats 不同，它为图表的每个部分创建一个 svg ，因此每个部分的突出显示悬停都是分开的path。需要明确的是，第 1 行：Black - Brown - Female 现在有两个 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>