Reputation: 3580
I'm going through the FreeCodeCamp beta curriculum for D3, and am trying to set color conditionally.
This attempt at setting it with an immediately invoked arrow function and ternary is not working.
.style("color", ((d)=>{
d <20 ? return "red"; : return "green";
})());
Any idea why?
Upvotes: 0
Views: 484
Reputation: 719
As @altocumulus said, the easiest way to do this is to pass d3's style
setter a function:
.style("color", d => d < 20 ? "red" : "green")
D3 will solve this function given the value of d
any time this line is called. If the data changes, and this style
setter is called again, the color will update.
If that's not what you intended, you could use the anonymous closure as you do, with the following changes:
.style("color", (d =>
d < 20 ? "red" : "green"
)(someVariable))
One reason you may want to do this is if the color depended on some dynamic variable which is not included in the data you passed to this selection, such as the current Date. You can pass this variable in by name in the place of someVariable
.
The main issue with your current arrow function is that you do not pass it a variable inside the parentheses, so d
will be undefined. The rest is just syntax:
The ternary operator has it's own sort of "return"-ability. Think of it as a micro-function:
var foo = (a ? b : c);
is essentially:
var foo = (function (a) {
if (a) return b;
else return c;
})(a);
Upvotes: 2