How to create custom style mapping in cytoscape.js?

问题

Is there a way to add a custom mapper to the new cytoscape.js?

I know there is data(nodeKey), but that uses nodeKey's value de novo. Can I set a mapping of my own?

Thanks!

回答1:

Custom mappers are too expensive in general, so they are not supported in Cytoscape.js. Good performance is one of our top requirements for the library.

If you would describe the sort of mapping you're looking for, it may be possible with the API today, or we could work something out that meets your needs. Thanks!

回答2:

Here is my custom mapper:

    /* Converts element attributes to their appropriate mapped values
     * Any non-matching attributes will be matched to the "other" mapping
     *     if exists
        * data: data
        * elementType: nodes or edges
        * attr: some key under data.nodes[i].data
        * mapping: obj mapping oldVal: newVal for attr
        * (toType): new values will be put into this attr, if attr 
        *   shouldn't be touched
    */
    function mapAttr(elementType, attr, mapping, toType){
        for(var i=0; i < data[elementType].length; i++){
            element = data[elementType][i]['data'][attr];
            toType = toType ? toType : attr;
            if( mapping[element] ){
                data[elementType][i]['data'][toType] = mapping[element];
            }else if(mapping['other']){
                data[elementType][i]['data'][toType] = mapping['other'];
            }
        }
    }

Example:

    var nodeShapeMapper = {
        Rearrangement: "hexagon",
        Gene: "octagon",
        Molecule: "triangle",
        other: "ellipse"
    };
    mapAttr('nodes', 'ntype', nodeShapeMapper, 'shape');

This generates values for the "shape" node attribute according to nodeShapeMapper[ntype]

来源：https://stackoverflow.com/questions/18323792/how-to-create-custom-style-mapping-in-cytoscape-js

标签

cytoscape.js