2

is there a way to create Sankey like edge width diagrams in cytoscape.js? To be clear, I do not want to create a Sankey diagram in cytoscape.js. What I do want is to create edges which have in total the size of the node they originate from.

One way to modify the edge width is via strength property, but I did not find a way to specify this property in relation to the originating node's size.

Thanks in advance

Andy

Andy
  • 9,483
  • 12
  • 38
  • 39

1 Answers1

1

You can use a data mapper and just set data.width for each element at init:

var cy = cytoscape({
  container: $('.cytoscape-container').get(0),
  ...,
  style: {
    {
      selector: 'edge',
      style: { 
        'width': 'data(size)'
      }
    }

    {
      selector: 'node',
      style: { 
        'width': 'data(size)',
        'height': 'data(size)'
      }
    }
  }
});

Or you can just use classes:

var cy = cytoscape({
  container: $('.cytoscape-container').get(0),
  ...,
  style: {
    {
      selector: 'edge.foo',
      style: { 
        'width': 20
      }
    }

    {
      selector: 'node.foo',
      style: { 
        'width': 20,
        'height': 20
      }
    }
  }
});
peteorpeter
  • 4,037
  • 2
  • 29
  • 47
  • It's best not to use custom functions, unless absolutely necessary -- because it now means you are in charge of micromanaging performance. Unless you use caching, you will create big slowdowns with custom functions. Further, reading style when writing style doesn't make sense, as it creates a race condition. Just set the same width for edges and nodes in your stylesheet, using classes or numbers. Use the built-in functionality of the stylesheet and let the library do the heavy lifting for you. – maxkfranz Jul 28 '16 at 13:04
  • This is a good point, re: the performance of all those function calls in each render. I haven't worked with large graphs (much) to see how quickly it degrades, and the docs do not highlight the "avoid unless necessary" mentality... perhaps that should be added? Classes don't seem like a natural fit for data-driven node sizes, unless you suggest they should be procedurally generated? – peteorpeter Jul 28 '16 at 14:31
  • 1
    Calls to .data() are on autopilot with style: It's all optimised for perf. If you call .data() to change the node size, then Cytoscape does the caching automatically. If you don't manage your function calls well, every time that the style can possibly be recalculated, it needs to be -- because Cytoscape can't make assumptions about your function. Static stylesheets like the second are even better for perf, because Cytoscape can do static analysis of the stylesheet blocks and diff-patch style updates. – maxkfranz Jul 28 '16 at 21:00
  • 1
    Where function values are introduced, there's a red warning about perf. There's also a warning near the top of the section titled "Performance". Maybe the first warning should be farther up, else not sure how to improve the warnings... – maxkfranz Jul 28 '16 at 21:00
  • Makes sense. Thanks for all the background! Maybe it's worth adding a small note right on that [function format topic] (http://js.cytoscape.org/#function-format), but I'll shut up about it ;) – peteorpeter Jul 28 '16 at 21:51
  • Oh and this is also OT, but thanks for all your hard work! – peteorpeter Jul 28 '16 at 21:52
  • 1
    The warning under http://js.cytoscape.org/#function-values will be moved up in the 2.7.7 docs release – maxkfranz Jul 29 '16 at 18:36