CODEWITHSUNDEEP
javascriptgraphcytoscape.jsgraph-visualizationcytoscape
Bugaboo
Bugaboo

Reputation: 971

Edges reflecting weight in Cytoscape

I just started looking into Cytoscape

I was looking at the example here. My goal is to have a weighted directed graph (pretty much like a dendrogram, except weighted). I need to have the edges reflect the weight (either in terms of length, or color but some sort of visual denotion). However, from the example, irrespective of what the edge weight is, I see no change in the graph. Does anyone know how I can achieve that?

Alternately, if there are other JS libraries that can help me visualize a weighted graph, I'd appreciate pointers on that as well.

Upvotes: 4

Views: 6407

Answers (2)

jaronimoe
jaronimoe

Reputation: 625

mappers are used to allow a per-element style encoding. http://js.cytoscape.org/#style/mappers

what is unfortunately missing from the documentation is a more detailed explanation of what kind of values it can map as well as an example of how/where to apply such a mapper:

style: [
{
  selector: 'node',
  style: {
    'content': 'data(name)',
    'font-family': 'helvetica',
    'font-size': 14,
    'text-outline-width': 3,
    'text-outline-color': '#999',
    'text-valign': 'center',
    'color': '#fff',
    'width': 'mapData(weight, 30, 80, 20, 50)',
    'height': 'mapData(height, 0, 200, 10, 45)',
    'border-color': '#fff'
  }
}]

supported values for interpolation (the last two input parameters) are: colors (as described in the docs), and numbers (as seen in the example above).

Upvotes: 2

maxkfranz
maxkfranz

Reputation: 12242

Simply set your edge style appropriately in your stylesheet, with a mapper.

Upvotes: 6

Related Questions