Search code examples
cytoscape-web

CustomMapper in Cytoscape.js?


I need to create a graph where the edge width is based on one of the edge property values. By looking at https://github.com/cytoscape/cytoscape.js/wiki/StyleObject, I see Cytoscape has a discreteMapper/passthroughMapper/continuousMapper but none of these let me access the edge properties. However, looking at the source code there's also a customMapper, which based on previous Cytoscape documentation(http://cytoscapeweb.cytoscape.org/documentation/mappers) would allow me to access the edge properties and return the width based on them. How do I do this? Inside the style object I tried:

...
width: { customMapper: { functionName: "widthMapper" } },
...

and

var widthMapper = function(data) 
{
    console.log(data);
};

before the initialization call. By setting a breakpoint to the function I see it never gets called. What am I doing wrong, do I need to add the mapper function somewhere in the Cytoscape object so it can see it?


Solution

  • the right syntax was

    ...
    width: { customMapper: widthMapper },
    ...