2017-03-29 1 views
0

Ich versuche, eine Überwachungsschnittstelle zu erstellen, die Windows-Dienste überprüft und den Status und den Starttyp mit var colorScale = d3.scale.ordinal() ermittelt.Die Ordinalskala wird nicht korrekt eingefärbt, obwohl das unbekannte Element impliziert ist.

Wenn der Status "RUNNING" ist, möchte ich die Zelle grün einmalen. Wenn der Zustand "STOPPED" ist, möchte ich die Zelle rot einfärben. Irgendwelche anderen Werte, um weiß zu färben.

Hier ist mein vollständiger Code:

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

Dies ist die Ausgabe:

enter image description here

Das Problem ist, wird der Code in der IP-Adresse und Hostnamen Farbe wenn diese Zellen weiß sein sollten.

Ich versuche ordinal.unknown() aufzurufen um einen dritten Wert in meinem Array, wie unten aufgeführt:

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

Der erste Wert des Arrays " " zeigt alle Werte, die außerhalb der zweiten und der dritten auf dem Array sind wird in weiß gefärbt, tut es aber immer noch nicht.

+0

Wahrscheinlich nicht verwandt, aber warum laden Sie beide Versionen 3 und 4 von 'd3'? – sparta93

Antwort

1

unknown ist nur in D3 v4.x verfügbar, und Sie haben es zu setzen ausdrücklich:

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>

A v3 alternative colorScale nur für die beiden definierten Werte ruft:

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>

Abgesehen davon, was Sie gesagt haben ...

Der erste Wert des Feldes „“ zeigt alle Werte, die außerhalb des zweiten und dritten auf dem Array sind in weiß gefärbt sein.

... ist nicht korrekt. Ein Leerzeichen ist kein Platzhalter für einen anderen Wert.

Und zum Schluss, ich kenne Ihre Datenstruktur nicht, aber es scheint mir, dass kein Wert übereinstimmt (zum Beispiel, "STATE: 4 RUNNING" unterscheidet sich von "RUNNING"), und die Skala ist nur durch den Bereich radeln. Um mehr darüber zu lesen, werfen Sie einen Blick auf meine Antwort hier: https://stackoverflow.com/a/40675350/5768908

Verwandte Themen