可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

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:

回答1:

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).

So, if you do:

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

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.

Then, you do:

.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>

回答2:

You should be able to just append a .style after your last .text(). It will be something along the lines of:

.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';}
  };

Might take a bit of fiddling around with the return values for the colours, not sure whether returning strings will work, might be better to return rgb(...) colours instead.