How to specify discrete mapper style in cytoscapejs?


Tags: css,json,cytoscape.js

Problem :

I am specifying the cytoscape.js style via css (and converting to the JSON format using this). I am trying to use a discrete mapper for the style. Similar to How to use a descreteMapper like on cytoscapeweb? but I don't want to just pass through the data(blah) value, I want to set different values based on different data(blah) values. Like this (which I based off what I found here)

node { 
   color : {
        defaultValue: red,
        discreteMapper: {
            attr: n_phosphorylated,
            mapped: {
                true: blue
            }
    }};
}

I am getting TypeError: element._private.style.color.value is undefined. Do I have the syntax wrong or is this not supported?



Solution :

Found the answer from this comment: How to create custom style mapping in cytoscape.js?

The correct way is to use selectors based on the data:

node[?n_phosphorylated] {
    color: blue;
}

Here the ? operator means (roughly) n_phosphorylated=true.

Thanks Max


    CSS Howto..

    How to use CSS in Emails (specifically, to design hyperlink button)

    Bootstrap table table-condensed table-hover, Top Border not showing

    CSS3 Transitions in Stylus - how to degrade for IE9

    How to use CSS to create an image overlay effect?

    Pure CSS3 show/hide full height div with transition

    How to position label text with css

    how to use font awesome in own css?

    How can I make this a horizontal list?

    How to make CSS float left not bend around when browser width is shrunk

    How to make rails load multiple css files

    How to dynicamlly center the center of a div based on screen size

    How do I make elements flow horizontally instead of vertically?

    How to create a curve tail for speech bubble with CSS?

    how to make a double hover effect with css

    how to make an interactive uploader like gmail and facebook have?

    Bootstrap Icons not showing in published ASP.NET MVC application

    How to apply css for 1900x600 width screen resolution only

    How to use “all” property in CSS

    How to match baseline in two floating divs

    How to view the html code that is used to display hidden json data?

    How to turn on Visual Studio 2010 .css Intellisense on .less file

    How should it work if I want a page to have a theme-roller (more or less like the jQuery themeroller)

    How to display random parts of a page on refresh?

    How to achieve following style for horizontal rule with css

    How to use localhost to host my HTML and CSS website

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    How to make my words not go under my picture in css

    Divs showing and then hiding on page load

    How can I make all images of different height and width the same via CSS?

    Showing different in Internet Explorer and Google Chrome