Javascript d3.js：如何使用空白值的颜色填充单元格？

我正在使用我发现的一些d3.js代码，这些代码基于它解析的.csv文件动态创建单元格。单元格内为数值，如果值为

x

，则显示一种颜色，如果值为

y

则显示另一种颜色，依此类推

我的伪代码如下：

//Color ranges for values within the report:
//0-30 green
//31-49 yellow
//50+ red

以下是相关代码：

var colorScale = d3.scale.threshold()
    .domain([30,49,20000])
    .range(["Chartreuse","Yellow","OrangeRed"]);

.domain（[]）

列出了值，并表示可以，最多30个-使用黄绿色，最多49个-使用黄色，最多20000个-使用橙红色

但是，由于我的报告是每小时一次的报告，因此它的值将为空，但单元格仍会按如下所示着色：

我想知道如何在

.domain（[]）

中的列表中指定空白值，这样9:00am列下的单元格将是白色或无色的

---

从概念上讲，我尝试了

[NaN，30,4920000]

，但没有成功。或者

[“”，30,4920000]

但这也不起作用。

您的问题可以通过计算值的

if

语句来解决

在JavaScript中，truthy值是在布尔上下文中计算时转换为true的值。所有的价值观都是真实的，除非它们被定义为虚假的

“falsy”值为：

• 假的
• 0
• “”
• 空的
• 未定义
• 楠

因此，使用我在中编写的代码，让我们将一些值定义为空：

6AM,7AM,8AM,9AM
32,55,67,
12,34,99,
11,,32,
11,65,,
,14,23,

下面是重要的部分：

.style("background-color", function(d) {
        if(d){
            return colorScale(d);
        } else {
            return "white";//or whatever colour you want
        }
    })

那么这个,

if(d)

仅当

d

不为null、NaN、未定义、0等时，计算结果才为true

它甚至可以更短：

.style("background-color", d => d ? colorScale(d) : "white")

以下是演示：

var parsedCSV=d3.csv.parse（d3.select（“#csv”）.text（））；
var colorScale=d3.scale.threshold（）
.domain（[30,70]）
.范围（[“黄绿色”、“黄色”、“橙色”）；
变量主体=d3。选择（“主体”）；
var headers=Object.keys（parsedCSV[0]）；
var table=body.append（'table'）
var thead=table.append（'thead'）
var tbody=table.append（'tbody'）；
var head=thead.selectAll（'th'）
.数据（标题）
.输入（）
.append（'th'）
.文本（功能（d）{
返回d；
});
var rows=tbody.selectAll（'tr'）
.数据（解析DCSV）
.输入（）
.append（'tr'）；
变量单元格=行。选择全部（'td'）
.数据（功能（d）{
返回Object.value（d）；
})
.输入（）
.append（'td'））
.样式（“背景色”，功能（d）{
如果（d）{
返回色标（d）；
}否则{
返回“白色”；
}
})
.文本（功能（d）{
返回d；
});
pre{
显示：无；
}
桌子{
边界塌陷：塌陷；
}
表，th，td{
边框：1px纯黑；
}
td，th{
填充：10px；
}

早上6点、7点、8点、9点
32,55,67,
12,34,99,
11,,32,
11,65,,
，14,23，