Estoy haciendo un visor de red usando Cytoscape JS, para lo cual necesito darle estilo a través de un objeto JSON. Básicamente, quiero un mapa de calor, así que los selecciono en 255 categorías, cada una con su propio color. Y como no voy a escribir 255 entradas, quería hacerlo con un bucle. Sin embargo, la combinación me está dando dolor de cabeza y realmente no puedo entender dónde estoy siendo estúpido.
var create_stylesheet = function(){ var to_return =[ { 'selector': 'node', 'style': {'content': 'data(label)', 'background-color': 'BlueViolet'} }, { 'selector': 'edge', 'style': {'label': 'data(score)'} }]; // <- this entry is for basic node labels and stuff. It needs to be first. //For loop that assigns a colour to each category. //As the red RGB value goes up, the blue RGB goes down. creating a gradient from cold to warm. // In the program warmer colours have a higher score. for(i = 0; i <= 255; i++){ var cat = `.cat_${i}`; var colour = `rgb(${i}, 0, ${255-i})`; var to_append = { 'selector': cat, 'style': {'line-color': colour} }; //Here I'd like to add to_append to the to_return variable. } return to_return; //Return the finished stylesheet. }
Gracias, realmente aprecio la ayuda.
EDITAR: Gracias a las personas que piensan junto conmigo. Lo que hice mal fue tratar de usar varias formas de hacerlo a la vez, lo que obviamente no funcionó. Así que construyo todo bien y lentamente, la ineficiencia les dará noches de insomnio a ciertos programadores, pero aquí está el código de trabajo:
var create_stylesheet = function(){ let to_return = []; let first_line = { 'selector': 'node', 'style': {'content': 'data(label)', 'background-color': 'BlueViolet'} }; let second_line = { 'selector': 'edge', 'style': {'label': 'data(score)'} }; let last_line = { 'selector': ':selected', 'style': { 'background-color': 'SteelBlue', 'line-color': 'black', 'target-arrow-color': 'black', 'source-arrow-color': 'black'} }; //Push the first two line into the array. to_return.push(first_line); to_return.push(second_line); for(let i = 0; i <= 255; i++){ var cat = `.cat_${i}`; var colour = `rgb(${i}, 0, ${255-i})`; var to_append = { 'selector': cat, 'style': {'line-color': colour} }; to_return.push(to_append); //Push each line into the array. } to_return.push(last_line); //add the last line. return to_return; }
Dos cosas a tener en cuenta.
let i = 0
. var create_stylesheet = function(){ var to_return =[ { 'selector': 'node', 'style': {'content': 'data(label)', 'background-color': 'BlueViolet'} }, { 'selector': 'edge', 'style': {'label': 'data(score)'} }]; // <- this entry is for basic node labels and stuff. It needs to be first. //For loop that assigns a colour to each category. //As the red RGB value goes up, the blue RGB goes down. creating a gradient from cold to warm. // In the program warmer colours have a higher score. for(let i = 0; i <= 255; i++){ var cat = `.cat_${i}`; var colour = `rgb(${i}, 0, ${255-i})`; var to_append = { 'selector': cat, 'style': {'line-color': colour} }; to_return = to_return.concat(to_append); } return to_return; } create_stylesheet()