Tips for setting discrete mapper style in cytoscapejs?

Currently, I am defining the style of cytoscape.js through CSS and converting it to JSON format using this resource. My goal is to implement a discrete mapper for styling. It's similar to the scenario discussed in How to use a descreteMapper like on cytoscapeweb?, however, I don't want to simply pass through the data(blah) value; rather, I intend to assign different values based on specific data(blah) criteria. Here is an example that I adapted from what I found here:

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

Upon implementing this, I encountered the error

TypeError: element._private.style.color.value is undefined
. Is there a mistake in my syntax or is this not supported?

Answer №1

Discovered the solution in the following response: How to create custom style mapping in cytoscape.js?

The proper method is to utilize selectors based on the data:

node[?n_phosphorylated] {
    color: blue;
}

In this case, the ? operator signifies (roughly) n_phosphorylated=true.

Credit goes to Max

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch the style sheets after the content

How can I create a toggle effect on the :after property, switching between + and - each time the link is clicked? I've attempted to achieve this using JavaScript, CSS, and HTML, but the code only changes + to - and doesn't switch back when the l ...

Using more than one class at a time is causing issues

Essentially, I have a div and I want to create an exercise where I apply three different classes using vue.js. I attempted to use v-bind:class, specifically :class, but can I bind a class directly from CSS? This is what I tried: html <div :style="[my ...

Is there a way to create a universal script that works for all modal windows?

I have a dozen images on the page, each opening a modal when clicked. Currently, I've created a separate script for each modal. How can I consolidate these scripts into one for all modals? <!-- 1 Modal--> <div class="gallery_product col-lg-3 ...

How to display a three.js scene in the center of a container

I'm having trouble getting my three.js scene to display above some cards and right below my navigation bar. Currently, the scene is rendering under the cards and is not centered. Despite looking at other forum posts for help, I can't seem to figu ...

Resolve the issue of Dojo images not appearing on a div in Internet Explorer

I am trying to incorporate images into a dojo chart using the given code: var l_images = ["images/clearnight.png","images/clear.png","images/partlyCloudy.png","images/cloudy.png","images/showers.png","images/rain.png","images/thunderstorms.png","images/ic ...

How to Use JavaScript Function to Rotate an Entire Webpage

For my final project in a web design class, we were tasked with creating a website that showcases our skills. I've completed the assignment and now I want to add some interesting features to make it stand out. I'm interested in using -webkit-tra ...

Transform Dictionary Containing Lists into CSV Format

Data Source Here is the initial JSON structure: { "foo":[ "asd", "fgh" ], "bar":[ "abc", "xyz", "ert" ], "baz":[ ...

Retrieving JSON data from two different URLs and processing it in the same Android activity

This is the code snippet: @Override protected DVLAInformation doInBackground(String... params) { try { Intent intent = getIntent(); String dvlaNumFin = intent.getStringExtra("dvlaNumber"); ...

Does Vue.js interfere with classList.remove functionality?

When working with Vue.js, I encountered an issue where elements would briefly flash curly braces to the user before being hidden. To combat this problem, I implemented the following solution: HTML: <div class="main hide-me" id="my-vue-element"> ...

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

I would like to align the text of my list items to the left. Additionally, I want all the icons to be the same size as the envelope icon used in Gmail list item. Currently, my code looks like this: https://i.stack.imgur.com/9LNOs.png How can I achieve th ...

Sending a variable through curlopt_url

I am trying to figure out how to pass a variable in CURLOPT_URL by adding it to the URL string. My current code is as follows: $curl = curl_init(); curl_setopt_array($curl, array( CURLOPT_URL => "https://api.postmates.com/v1/customers/cus_KtQih0aARUZ ...

Exploring a Compilation of Unconventional Thesauruses

I recently extracted data from a sports betting website API, which provided me with JSON information in the form of a list of dictionaries. My goal is to extract specific bets and their corresponding odds from this data. Below you can find the code I have ...

jQuery is great at adding a class, but struggles to remove it

When you click on an anchor with the class .extra, it adds the "extra-active" class and removes the "extra" class. However, when you click on an anchor with the extra-active class, it does not remove the extra-active class and replace it with extra. Here ...

Tips for keeping the Menu bar at the top of the page while scrolling from the middle

I came across a technique mentioned here that I wanted to implement. I used this jsfiddle link (which worked well) to create my own version http://jsfiddle.net/a2q7zk0m/1/, along with a custom menu. However, now it seems like it's not working due to a ...

What is the best way to add a background image to a div without a fixed height in order for it to span the full width and

I am trying to incorporate a background image into a div element in such a way that it behaves like a background image in the body. I have looked at an example here: http://plnkr.co/edit/gFZZgPmSKMDu3gZEp1H0?p=preview where the width and height adjust ba ...

Modifying the color of the tooltip arrow in Bootstrap 4: A step-by-step guide

How can I change the arrow color of the tooltip using Bootstrap 4? Here is my current code: HTML: <div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Service fee helps Driveoo run the platform and provide dedicate ...

How can CSS be used to make an element completely move off the visible screen?

Imagine if I had a div that was positioned outside of the visible area of the computer monitor screen. When using CSS transitions to move it to a specific position, it would create an effect of the element slowly moving in from outside of the screen. Add ...

Using ContentResult and DataType in an ajax request in Mvc3

Recently, I was on a quest to find a reliable engine for generating charts using Asp.Net Mvc 3. Eventually, my search led me to FusionChart, which offers a wide variety of chart types. In order to assist me in creating the necessary XML to display the cha ...

Positioning a div at the bottom of the viewport, centered with 2 rows of 6 elements, and adjusting its size to fit the page

I've searched for answers but haven't found anything that works for me. I'm looking to have 2 rows of 6 elements at the bottom of the page and have them stick there as the page scrolls. I tried using a table, which almost worked. .center ...

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

When it comes to using similarities in my code, I often find myself needing a more flexible solution. For example: .position{ position:absolute; right:10px; top:20px; } This is where the idea of using a mixin comes in handy: .position(@absolute:ab ...