So I'm looking to sort the edges on my Sankey based on their thickness (the thickest edges on the top, the thinnest on the bottom).
I understand that the hierarchical layout algorithm sorts and orders the edges optimally so that the edges cross a minimal number of times in the chart (and make it look clearer). However, our feature requirement is to place the thickest/heaviest edges on the top.
I'm using part of the layout code from the Sankey demo and I have this part of the code that I think I can use to sort the edges:
adjustNodeSize(node: YNode, graph: LayoutGraph): void {
let width = 60;
let height = 40;
const leftEdgeSpace = this.calcRequiredSpace(node.inEdges, graph);
const rightEdgeSpace = this.calcRequiredSpace(node.outEdges, graph);
if (
this.layoutOrientation === LayoutOrientation.TOP_TO_BOTTOM ||
this.layoutOrientation === LayoutOrientation.BOTTOM_TO_TOP
) {
// we have to enlarge the width such that the in-/out-edges can be placed side by side without overlaps
width = Math.max(width, leftEdgeSpace);
width = Math.max(width, rightEdgeSpace);
} else {
// we have to enlarge the height such that the in-/out-edges can be placed side by side without overlaps
height = Math.max(height, leftEdgeSpace);
height = Math.max(height, rightEdgeSpace);
}
// adjust size for edges with strong port constraints
const edgeThicknessDP = graph.getDataProvider(
HierarchicLayout.EDGE_THICKNESS_DP_KEY
);
if (edgeThicknessDP !== null) {
if (node.edges) {
node.edges.forEach((edge: Edge): void => {
const thickness = edgeThicknessDP.getNumber(edge);
const spc = PortConstraint.getSPC(graph, edge);
if (edge.source === node && spc !== null && spc.strong) {
const sourcePoint = graph.getSourcePointRel(edge);
width = Math.max(width, Math.abs(sourcePoint.x) * 2 + thickness);
height = Math.max(height, Math.abs(sourcePoint.y) * 2 + thickness);
}
const tpc = PortConstraint.getTPC(graph, edge);
if (edge.target === node && tpc !== null && tpc.strong) {
const targetPoint = graph.getTargetPointRel(edge);
width = Math.max(width, Math.abs(targetPoint.x) * 2 + thickness);
height = Math.max(height, Math.abs(targetPoint.y) * 2 + thickness);
}
});
}
}
graph.setSize(node, width, height);
}
Also in the docs, I found a sortEdges() method and I think maybe this is something I can use to sort the edges. Am I on the right track here? Or does anyone have any code samples that uses these methods (like sortEdges) or a code sample that actually sorts the edges based on their thickness?
