Добавление ярлыков по ссылкам на чарты Санки с использованием plotly.js ⇐ Javascript

[Anonymous]

Я попытался добавить метки по ссылкам моего Санки, которые показали бы значение ссылки. Я только что попытался добавить свойство «лейбл» к ссылке, а также в трассировке диаграммы Санки, но это не сработало. Является ли это свойство для ссылок также возможным, как оно существует для узлов или есть какой -либо другой способ добавления значений на ссылки, а не только на подсказках? Вот пример кода Fiddle < /p> window.addEventListener('DOMContentLoaded', () => {
const chartDiv = document.getElementById('chartDiv');

const labels = ["Start", "Middle", "Begin", "End", "Final"];
const labelIndex = new Map(labels.map((label, i) => [label, i]));
const links = [
{ source: "Start", target: "Middle", value: 5, label: "Test" },
{ source: "Start", target: "Middle", value: 3, label: "Test2" },
{ source: "Middle", target: "Start", value: 1, label: "" },
{ source: "Start", target: "End", value: 2, label: "" },
{ source: "Begin", target: "Middle", value: 5, label: "Test" },
{ source: "Middle", target: "End", value: 3, label: "" },
{ source: "Final", target: "Final", value: 0.0001, label: "" }
];
const sources = links.map(link => labelIndex.get(link.source));
const targets = links.map(link => labelIndex.get(link.target));
const values = links.map(link => link.value);

const customData = links.map(link => [link.source, link.target, link.value]);

const trace = {
type: "sankey",
orientation: "h",
arrangement: "fixed",
node: {
label: labels,
pad: 15,
thickness: 20,
line: { color: "black", width: 0.5 },
hoverlabel: {
bgcolor: "white",
bordercolor: "darkgrey",
font: {
color: "black",
family: "Open Sans, Arial",
size: 14
}
},
hovertemplate: '%{label}',
color: ["#a6cee3", "#1f78b4", "#b2df8a", "#a9b1b9", "#a9b1b9" ]
},
link: {
source: sources,
target: targets,
value: values,
label: values,
arrowlen: 20,
pad: 20,
thickness: 20,
line: { color: "black", width: 0.2 },
color: sources.map(i => ["#a6cee3", "#1f78b4", "#b2df8a", "#a9b1b9", "#a9b1b9"]),
customdata: customData,
hoverlabel: {
bgcolor: "white",
bordercolor: "darkgrey",
font: {
color: "black",
family: "Open Sans, Arial",
size: 14
}
},
hovertemplate:
'%{customdata[0]} → %{customdata[1]}' +
'Flow Value: %{customdata[2]}'
}
};

const layout = {
font: { size: 14 },
//margin: { t: 20, l: 10, r: 10, b: 10 },
//hovermode: 'closest'
};

Plotly.newPlot(chartDiv, [trace], layout, { responsive: true, displayModeBar: true })
.then((plot) => {
chartDiv.on('plotly_click', function(eventData) {
console.log(eventData);
if (!eventData || !eventData.points || !eventData.points.length) return;
const point = eventData.points[0];
if (typeof point.pointIndex === "number") {
const nodeLabel = point.label;
alert("Node clicked: " + nodeLabel + "\nNode index: " + point.pointIndex);
console.log("Node clicked:", point);
} else if (typeof point.pointNumber === "number") {
const linkIdx = point.pointNumber;
const linkData = customData[linkIdx];
alert(
"Link clicked: " +
linkData[0] + " → " + linkData[1] +
"\nValue: " + linkData[2] +
"\nLink index: " + linkIdx
);
console.log("Link clicked:", point);
} else {
console.log("Clicked background", point);
}
});
});
});


Подробнее здесь: https://stackoverflow.com/questions/796 ... -plotly-js