如何根据 .csv 报告中的数值以及动态创建表格时更改表格单元格颜色？答案

【问题标题】：How to change table cell color based on numeric value from .csv report AND when tables are dynamically created?如何根据 .csv 报告中的数值以及动态创建表格时更改表格单元格颜色？
【发布时间】：2016-12-14 16:48:56
【问题描述】：

我正在使用 d3.js 中的一些代码在 html 页面中动态构建单元格表。因此，如果它是 5x5 .csv 报告，它将在页面上生成 5x5 等等。

此报告用于监控我们的某些机器，因此如果数值在某个范围内，我想分别显示绿色、黄色或红色表示良好、谨慎或严重。

这是一个每小时生成的 .csv 报告，将从早上 6 点到下午 6 点监控我们的机器。数值反映了我们是要显示绿色、黄色还是红色。

<!DOCTYPE html>
<html>
<head>

    <script src="http://d3js.org/d3.v3.min.js">
    </script>
    <script src="d3.min.js?v=3.2.8">
    </script>
    <meta content="30" http-equiv="refresh">
    <title></title>
</head>
<body>
    <script>
                   d3.text("myCSV.csv", function(data) {
                       var parsedCSV = d3.csv.parseRows(data);
                       var container = d3.select("body")
                           .append("table")
                           .selectAll("tr")
                               .data(parsedCSV).enter()
                               .append("tr")
                           .selectAll("td")
                               .data(function(d) { return d; }).enter()
                               .append("td")
                               .text(function(d) { return d; });
                   });
    </script>
</body>
</html>

出于概念目的，我们的报告如下所示：

【问题讨论】：

标签： javascript d3.js dynamic charts

【解决方案1】：

我建议您使用阈值量表：

类似于量化比例，除了它们允许您将域的任意子集映射到范围内的离散值。输入域仍然是连续的，并根据一组阈值划分为切片。输入域通常是您想要可视化的数据的维度，例如样本总体中学生的身高（以米为单位）。输出范围通常是所需输出可视化的维度，例如一组颜色（表示为字符串）。

所以，如果你这样做：

var colorScale = d3.scale.threshold()
    .domain([30, 70])
    .range(["red", "yellow", "green"]);

您将创建一个刻度，如果值小于 30，将返回“红色”，如果值介于 30 和 70 之间，则返回“黄色”，最后返回“绿色”，超过 70。

然后，你这样做：

.style("background-color", function(d){
    return colorScale(d);
})

查看这个demo（我用的是我自己的表格代码，和你的有点不一样，但是原理是一样的）：

var parsedCSV = d3.csv.parse(d3.select("#csv").text());

    var colorScale = d3.scale.threshold()
        .domain([30, 70])
        .range(["red", "yellow", "green"]);

    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) {
            return colorScale(d);
        })
        .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">foo,bar,baz
32,55,67
12,34,99
11,21,32
11,65,76
99,14,23</pre>

【讨论】：

感谢您的回答，我可能有几个问题：您使用的.data(headers) 和.enter() 等代码是d3.js 内置的吗？你能解释一下他们是做什么的吗？
只是数据绑定。你的代码中也有同样的东西。
所以我一直在尝试使用您的代码在我的初始代码中进行颜色更改，但我遇到了麻烦。我想将其粘贴为新的

【解决方案2】：

您应该能够在最后一个 .text() 之后附加一个 .style。这将是这样的：

.append('td')
  .text(...)
  .style('background-color', function(d) { 
    if (d < 3) {return 'green';}
    else if (d < 5) {return 'yellow';}
    else if (d < 10) {return 'orange';}
    else {return 'red';}
  };

可能需要对颜色的返回值进行一些摆弄，不确定返回的字符串是否有效，最好返回 rgb(...) 颜色。

【讨论】：