Question

我正在使用一些d3.js代码我发现它可以根据它解析的.csv文件动态创建单元格。在单元格内是数值，如果值为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([])

.domain([])是，或者至少我认为它应该被理解，列出了值并且说好了，最多30个 - 使用黄绿色，最多49个 - 使用黄色，最多20000个 - 使用橙红色

但是，我的报告会有一个空白的值，因为它是一个小时的报告，但是细胞仍然会变成彩色，如下所示：

我想知道如何在[NaN,30,49,20000]的列表中指定空白值，以便上午9:00列下的单元格为白色或无色。

从概念上讲，我尝试了["",30,49,20000]，但这并没有奏效。或private string _informativeMessage; public string InformativeMessage { get { return _informativeMessage; } set { if (_informativeMessage != value) { if(value == SomeValueThatMakesMeNeedToChangeIt) { _informativeMessage = "Overridden Value"; } else { _informativeMessage = value; } RaisePropertyChanged(); } } }，但这也无效。

Answer 1

您的问题可以通过评估"truthy"值的if语句来解决。

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

“虚假”值是：

假
0
“”
空
未定义
的NaN

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

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不为空，NaN，未定义，0等时，

才会计算为真......

它可以更短：

.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])
        .range(["Chartreuse","Yellow","OrangeRed"]);

    var body = d3.select("body");
    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')
        .data(headers)
        .enter()
        .append('th')
        .text(function(d) {
            return d;
        });

    var rows = tbody.selectAll('tr')
        .data(parsedCSV)
        .enter()
        .append('tr');

    var cells = rows.selectAll('td')
        .data(function(d) {
            return Object.values(d);
        })
        .enter()
        .append('td')
        .style("background-color", function(d) {
          if(d){
            return colorScale(d);
            }else{
              return "white";
              }
        })
        .text(function(d) {
            return d;
        });

pre {
  display: none;
}
	
table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

td,th {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<pre id="csv">6AM,7AM,8AM,9AM
32,55,67,
12,34,99,
11,,32,
11,65,,
,14,23,</pre>

PS ：您的阈值比例不正确。在阈值范围内......

...如果比例范围内的值数为N + 1，则比例域中的值数必须为N.

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

1 个答案: