如何根据.csv报告中的数值更改表格单元格颜色，以及动态创建表格时？ [英] How to change table cell color based on numeric value from .csv report AND when tables are dynamically created?
问题描述
我使用来自d3.js的一些代码在HTML页面中动态构建单元格。因此，如果是5x5 .csv报告，它将在页面上产生5x5，依此类推。
I'm using some code from d3.js to build a cell sheet in an html page dynamically. So if it is a 5x5 .csv report, it will produce 5x5 on the page and so forth.
此报告用于监控我们的一些机器，因此如果
This report is for monitoring purposes of some of our machines and so if the numeric values are within a range, I want to display either green, yellow or red for good, caution or critical, respectively.
这是一个每小时生成的.csv报告，它是一个小时生成的.csv报告。将从上午6点至下午6点监控我们的机器。数值反映了我们是否要显示绿色，黄色或红色。
It is an hourly generated .csv report that will monitor our machines from 6am-6pm. The numeric values reflect whether we want to display green, yellow or red.
<!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>
出于概念目的，这是我们的报告：
For conceptual purposes, this is what our report looks like:
推荐答案
我建议您使用阈值尺度，其中：
I suggest you use a threshold scale, which:
与量化比例类似，只是它们允许将域的任意子集映射到该范围中的离散值。输入域仍然是连续的，并且基于一组阈值被划分成片。输入域通常是您想要可视化的数据的维度，例如样本总体中学生的高度（以米为单位）。输出范围通常是所需输出可视化的维度，例如一组颜色（表示为字符串）。
are similar to quantize scales, except they allow you to map arbitrary subsets of the domain to discrete values in the range. The input domain is still continuous, and divided into slices based on a set of threshold values. The input domain is typically a dimension of the data that you want to visualize, such as the height of students (measured in meters) in a sample population. The output range is typically a dimension of the desired output visualization, such as a set of colors (represented as strings).
如果你这样做：
var colorScale = d3.scale.threshold()
.domain([30, 70])
.range(["red", "yellow", "green"]);
您将创建一个比例，如果值小于30，将返回红色
You'll create a scale that will return "red" if the value is less than 30, "yellow" if the value is between 30 and 70, and finally "green" for over 70.
然后，您就可以：
.style("background-color", function(d){
return colorScale(d);
})
检查这个演示（我使用我自己的表代码，有点不同于你的，但原理是一样的） ：
Check this demo (I'm using my own table code, a little bit different from yours, but the principle is the same):
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>
这篇关于如何根据.csv报告中的数值更改表格单元格颜色，以及动态创建表格时？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
