在 D3 中使用三元

Question

我正在尝试弄清楚如何在 D3 中将多个条件与三元运算符一起使用（仍在寻找使用 D3 的方法）。我有一个包含 legislative 列的电子表格，包含的值是 Yes1、Yes2、Yes3 和 No。对于 Yes1，我想将我的圆圈涂成红色，Yes2 是粉红色，Yes3 是橙色，No是灰色的。下面的代码仅将所有圆圈着色为红色或粉红色。

.style("fill", function(d) { 
    return (d.data.legislative == "Yes1" ? "red" : "grey" || "Yes2" ? "pink" : "grey" || "Yes3" ? "orange" : "grey");
})

Answer 1

在 D3 中，惯例是对两组值之间的此类映射使用比例尺。

在您的情况下，您将创建一个序数标度，例如：

let colour = d3.scaleOrdinal()
.domain(["Yes1", "Yes2", "Yes3", "No"])
.range(["red", "pink", "orange", "grey"])

然后在您的样式函数中，您将根据 d.data.legislative 的值使用色标 return 颜色：

.style("fill", function(d) { return colour(d.data.legislative) })

Answer 2

如 .

中所述，惯用的 D3 使用简单的序数标度

但是，为了完整起见，这是您的情况下正确的三元运算符：

return d.data.legislative === "Yes1" ? "red" : 
    d.data.legislative === "Yes2" ? "pink" :
    d.data.legislative === "Yes3" ? "orange" : "gray";

让我们看看实际效果：

["Yes1", "Yes2", "Yes3", "No"].forEach(function(d) {
  console.log(d + " -> " + (d === "Yes1" ? "red" : d === "Yes2" ? "pink" : d === "Yes3" ? "orange" : "gray"));
})

在 D3 中使用三元

Using ternary in D3

javascript

ternary

d3.js