2017-03-29 12 views
0

私は、Windowsサービスをチェックし、var colorScale = d3.scale.ordinal()を使用して状態とstart_typeを決定する監視インターフェイスを作成しようとしています。未定義が暗示されているにもかかわらず、

状態が「実行中」の場合、セルの緑色で色付けします。状態が「停止」の場合、セルの赤色で色付けしたいと思います。その他の値は、白で表示されます。ここで

は私の完全なコードです:

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

これが出力されます:

enter image description here

問題は、コードは、IPアドレスとホスト名の色になる、ですそれらの細胞が白くなるべきとき。

Iは、下記のように私の配列内の3番目の値を使用してordinal.unknown()を起動しようとしています:

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

アレイ" "の最初の値は、アレイ上に外側第二及び第三のある任意の値を示し白で色付けされますが、まだそれはしません。

+0

おそらく関係はありませんが、なぜあなたは 'd3'のバージョン3と4の両方をロードしていますか? – sparta93

答えて

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の代替が2つのしか定義された値のため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>
あなたが言ったことのほか

は、...

アレイ「の最初の値が」白に着色され、アレイ上の第二及び第三の外にある任意の値を示しています。

...が正しくありません。スペースは、他の値のワイルドカードではありません。

あなたのデータ構造はわかりませんが、値は一致しません(たとえば、「状態:4ランニング」は「ランニング」とは異なります)。縮尺は範囲をサイクリングするだけです。これについてもっと読むには、私の答えをここで見てください:https://stackoverflow.com/a/40675350/5768908

関連する問題