D3：使用立即调用的箭头函数和三元有条件地设置样式

Question

我正在浏览D3的FreeCodeCamp beta课程，并尝试有条件地设置颜色。

尝试使用立即调用的箭头函数和三元组进行设置无效。

.style("color", ((d)=>{
      d <20 ? return "red"; : return   "green";
    })());

知道为什么吗？

Answer 1

正如@altocumulus所说，最简单的方法是让d3＆＃39; style设置一个函数：

.style("color", d => d < 20 ? "red" : "green")

D3将在任何时候调用此行时给定d的值来解决此函数。如果数据发生更改，并且再次调用此style setter，则颜色将更新。

如果

.style("color", (d =>
    d < 20 ? "red" : "green"
)(someVariable))

您可能想要这样做的一个原因是，颜色是否取决于您传递给此选择的数据中未包含的某个动态变量，例如当前日期。您可以在someVariable。

的位置按名称传递此变量

当前箭头函数的主要问题是您没有在括号内传递变量，因此d将是未定义的。其余的只是语法：

1. 在箭头函数中，如果函数的主体是单行，则隐含return语句。

2. 三元运营商拥有自己的＆＃34;返回＆＃34; -ability。把它想象成一个微观功能：

   var foo = (a ? b : c);
   

基本上是：

var foo = (function (a) {
    if (a) return b;
    else return c;
})(a);