Welcome to yEd Q&A!
Here you can ask questions and receive answers from other members of the community and yEd developers. And you can tell us your most wanted feature requests.


Sorting Edges based on their thickness (Sankey Chart)

0 votes

Hi Guys,

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(
    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?


closed with the note: Not a yEd question.
in Help by
closed by

1 Answer

0 votes
Best answer

This forum is for yEd questions only. For questions regarding one of the yFiles for HTML programming library, please contact yWorks support by mail. (Please include your yWorks customer or evaluator ID in your mail when doing so.)

by [yWorks] (151k points)
Legal Disclosure | Privacy Policy