javascript - D3 : setting style conditionally with immediately invoked arrow function and ternary

Question

我正在学习 D3 的 FreeCodeCamp beta 类(class)，并尝试有条件地设置颜色。

尝试使用立即调用的箭头函数和三元来设置它是行不通的。

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

知道为什么吗？

Answer 1

正如 @altocumulus 所说，最简单的方法是向 d3 的 style setter 传递一个函数:

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

每当调用此行时，

D3 将在给定 d 值的情况下求解此函数。如果数据发生变化，并且再次调用此 style setter，颜色将会更新。

如果这不是您想要的，您可以像您一样使用匿名闭包，并进行以下更改:

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

您可能想要执行此操作的一个原因是，如果颜色取决于某个动态变量，而该变量未包含在您传递给此选择的数据中，例如当前日期。您可以在 someVariable 的位置按名称传递此变量。

当前箭头函数的主要问题是您没有将括号内的变量传递给它，因此 d 将是未定义的。剩下的只是语法:

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

2. 三元运算符有它自己的“返回”能力。将其视为一个微功能:

   var foo = (a ? b : c);
   

本质上是:

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