d3.scale.threshold（）を使用したときの特定の値の色の設定

Question

50〜150の範囲の値の場合はマイコードの色が青、150より大きい場合は黄色、150の値の場合は黄色です。値はゼロに正確に等しい。範囲に新しい色を追加すると、[白、緑、青、黄]と表示されます。それは黄色を除去し、範囲内の最初の3つの色のみを写像します。スレッショルドスケールでは、正確にゼロに等しい値の色を設定することすらできますか？

は今のところ、私はこのように私のコードで私のスケールを設定している：

var scale = d3.scale.threshold().domain([50,150]).range([GREEN, BLUE, YELLOW]); 

私はこれらの例が動作し、スタックオーバーフローで指定フィドルの例をいくつか試してみましたが、彼らは私の場合には対応していません。

Answer 1

「塗りつぶし」属性内にifで特定の色の値を設定できますが、しきい値スケールでも行うことができます。あなたの問題はちょうどドメインです。 APIによると：規模の範囲内の値の数がN + 1である場合

、規模のドメイン内の値の数は、だから、あなたはあなたを定義する必要がN.

でなければなりませんこのようなカラースケール：上記スケールと

var scale = d3.scale.threshold() 
    .range(["white", "green", "blue", "yellow"]) 
    .domain([0.001, 100, 150]); 

、0.001以下の任意の値は100と青色と黄色に150上に150との間に、0.001及び緑色100との間に、「白」に関連します。このスニペット（data内部値と円の色を見て）

.attr("fill", function(d){ 
    if(d === 0){ 
     return "white" 
    } else { 
     //your "else" condition  
    } 
}); 

チェック：あなたは正確ゼロに値のみを白に設定する必要がある場合

、もしを作成

var colors = d3.scale.threshold() 
 
.range(["white", "green", "blue", "yellow"]) 
 
.domain([0.001, 100, 150]); 
 

 
var data = [0, 140, 100, 170, 120, 0, 120, 10]; 
 

 
var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", 500) 
 
\t .attr("height", 200); 
 
\t 
 
var circles = svg.selectAll(".circles") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("circle") 
 
\t 
 
circles.attr("r", 20) 
 
\t .attr("cy", 50) 
 
\t .attr("cx", function (d, i){ return 30 + i*60}) 
 
\t .attr("stroke", "gray") 
 
\t .attr("fill", function(d){ return colors(d)});

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