Question

我正在尝试创建一个监视接口来检查Windows服务，并使用var colorScale = d3.scale.ordinal()确定其状态和start_type。

如果状态是＆＃34; RUNNING＆＃34;，我想在单元格中着色为绿色。如果状态为＆＃34; STOPPED＆＃34;，我想在单元格中着色为红色。任何其他值，以白色着色。

这是我的完整代码：

<html>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script type="text/javascript">
        var parsedCSV = d3.csv("servicecheckupreport.csv", function(parsedCSV){



    var colorScale = d3.scale.ordinal()
        .domain([" ","RUNNING","STOPPED"])
        .range(["White","MediumSpringGreen","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;
        });
        }); 
</script>

这是输出：

问题是，当这些单元格应为白色时，代码将在ip地址和主机名中着色。

我试图通过使用我的数组中的第三个值来调用ordinal.unknown()，如下所示：

var colorScale = d3.scale.ordinal()
    .domain([" ","RUNNING","STOPPED"])
    .range(["White","MediumSpringGreen","OrangeRed"]);

数组" "的第一个值表示数组之外的第二个和第三个值将以白色着色，但它仍然没有。

Answer 1

unknown仅适用于D3 v4.x，您必须将其设置为明确：

var data = ["RUNNING", "foo", "STOPPED", "RUNNING", "bar", "STOPPED"];

var colorScale = d3.scaleOrdinal()
    .domain(["RUNNING","STOPPED"])
    .unknown("White")
    .range(["MediumSpringGreen","OrangeRed"]);
    
data.forEach(function(d){ console.log(colorScale(d))});

<script src="https://d3js.org/d3.v4.min.js"></script>

v3替代方法仅针对两个定义的值调用colorScale：

var data = ["RUNNING", "foo", "STOPPED", "RUNNING", "bar", "STOPPED"];

var colorScale = d3.scale.ordinal()
    .domain(["RUNNING","STOPPED"])
    .range(["MediumSpringGreen","OrangeRed"]);
        
data.forEach(function(d){ 
    if(d === "RUNNING" || d === "STOPPED"){
        console.log("White");
    } else {
    console.log(colorScale(d));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

除此之外，你所说的......

数组的第一个值“”表示数组中第二个和第三个之外的任何值将以白色着色。

......不正确。空格不是任何其他值的通配符。

而且，为了完成，我不知道你的数据结构，但在我看来没有值匹配（例如，“STATE：4 RUNNING”与“RUNNING”不同），并且规模只是骑自行车穿越范围。要了解更多相关信息，请在此处查看我的答案：https://stackoverflow.com/a/40675350/5768908

尽管隐含未知，但序数量表并未正确着色？

1 个答案: