Question

我试图弄清楚如何在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");
})

Answer 1

在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) })

Answer 2

为此，惯用的D3使用的是简单的有序刻度，如other answer中所述。

但是，出于完整性考虑，这是您情况下正确的三元运算符：

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中使用三元

2 个答案: