1

我正在尝试弄清楚如何在 D3 中使用三元运算符的多个条件（仍然在 D3 中找到我的方式）。我有一个带有立法列的电子表格，其中包含的值是 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");
})
4

2 回答 2

3

在 D3 中，约定使用比例来在两组值之间进行这种类型的映射。

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

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

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

.style("fill", function(d) { return colour(d.data.legislative) })
于 2018-06-28T01:13:19.180 回答
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"));
})

于 2018-06-28T01:20:02.793 回答