I am using a json file to store data for generating a diagram, and I want to change the color of the diagram conditionally based on an attribute in the json. If the attribute is false, the color should be red, and if true, it should be green. Here is a snippet from my json file:
"children": [
{
"children": [
{
"children": [],
"id": 50,
"name": "gfj",
"checked": true
}
],
"id": 51,
"name": "malek"
},
{
"children": [
{
"children": [
{
"children": [],
"id": 49,
"name": "nice",
"checked": true
}
],
"id": 48,
"name": "amira",
"checked": false
}
],
"id": 47,
"name": "mahdi"
}
],
I have successfully extracted the attribute "checked" from the json file into my javascript file, but I'm unsure how to dynamically change the color as the color is defined in the css file.
_checked = function(d){ return d.checked; },
Below is a snippet from the css file:
/*
Example fishbone styling... note that you can't actually change
line markers here, which is annoying
*/
html, body{ margin: 0; padding: 0; overflow: hidden;}
/* get it? gill? */
*{ font-family: "serif", "serif"; }
.label-0{ font-size: 2em }
.label-1{ font-size: 1.5em; fill: #06405a; }
.label-2{ font-size: 1em; fill: #06405a; }
.label-3{ font-size: .9em; fill: #888; }
.label-4{ font-size: .8em; fill: #aaa; }
.link-0{ stroke: #188fc6; stroke-width: 3px}
.link-1{ stroke: #188fc6; stroke-width: 2px}
.link-2, .link-3, .link-4{ stroke: #188fc6; stroke-width: 2px; }
The links represent arrows in the diagram, each with its own color and size. My question is, how can I utilize the "checked" attribute obtained in the javascript file to dynamically change the color in the css file. Thank you for your help.