d3.scaleQuantizeの代わりに？

現在、d3 Calendar Viewに基づいてチャートを作成しています。

私が持っている問題は、色の問題です。それは明らかに領域を色の数で分割し、次に各セクションに色を割り当てるd3.scaleQuantize()を使用します。言い換えると、すべての色が同じ範囲にあります。

したがって、次の場合には、1 & 2との間の何かが青色である、3 6、黒である赤、7 & 8は黄色であり、9 & 10が緑色です。

var color = d3.scaleQuantize() 
.domain([1,10]) 
.range(["Blue", "Black", "Red", "Yellow", "Green"]);

具体的なケースでは、範囲に応じて色を設定する必要があります。たとえば、1 & 3の間のものは青、4 & 6は黒、6以上は赤です。

これは可能ですか？

ありがとうございました。

私は、参照としてすべてのコードを含めています：参考のため

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script> 
<script> 

var url_string = window.location.href; 
var url = new URL(url_string); 
var Cell = url.searchParams.get("Cell"); 

var width = 960, 
    height = 136, 
    cellSize = 17; 

var color = d3.scaleQuantize() 
    .domain([0, 10]) 
    .range(["Blue", "Black", "Red", "Yellow", "Green"]); 

var dateFormat = d3.timeFormat("%Y-%m-%d"); 

var svg = d3.select("body") 
    .selectAll("svg") 
    .data(d3.range(2017, 2018)) 
    .enter().append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + ((width - cellSize * 53)/2) + "," + (height - cellSize * 7 - 1) + ")"); 

var rect = svg.append("g") 
    .attr("fill", "none") 
    .attr("stroke", "#ccc") 
    .selectAll("rect") 
    .data(function(d) { 
    return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)); 
    }) 
    .enter().append("rect") 
    .attr("width", cellSize) 
    .attr("height", cellSize) 
    .attr("x", function(d) { 
    return d3.timeWeek.count(d3.timeYear(d), d) * cellSize; 
    }) 
    .attr("y", function(d) { 
    return d.getDay() * cellSize; 
    }) 
    .datum(dateFormat); 

svg.append("g") 
    .attr("fill", "none") 
    .attr("stroke", "#000") 
    .selectAll("path") 
    .data(function(d) { 
    return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); 
    }) 
    .enter().append("path") 
    .attr("d", pathMonth); 

var url = "http://Server/Service1.svc/GetData/" + Cell; 

d3.json(url, function(error, data) { 
    //populating data since i don't have the file 

    var nest = d3.nest() 
    .key(function(d) { 
     return d.datekey; 
    }) 
    .map(data); 

    rect.filter(function(d) { 
     return ("$" + d) in nest; 
    }) 
    .attr("fill", function(d) { 
     return color(nest[("$" + d)][0].Sales); 
    }) 
}); 

function pathMonth(t0) { 
    var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), 
    d0 = t0.getDay(), 
    w0 = d3.timeWeek.count(d3.timeYear(t0), t0), 
    d1 = t1.getDay(), 
    w1 = d3.timeWeek.count(d3.timeYear(t1), t1); 
    return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize + 
    "H" + w0 * cellSize + "V" + 7 * cellSize + 
    "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize + 
    "H" + (w1 + 1) * cellSize + "V" + 0 + 
    "H" + (w0 + 1) * cellSize + "Z"; 
} 
</script>

出典

2017-08-11 rbhat

要件が単純で簡潔な場合は、独自のスケール関数を記述しないでください。基本的には値をとり、色を返します。 – Sirko

私はd3チャートに新しく、JavaScriptは非常に限られています。私はスケール関数を書く場所を知りませんでした。 – rbhat

'function scale（x）{switch（true）{case x <= 3：" blue "を返します。 case x <= 6： "black"を返します。デフォルト： "green"を返します。 }} '私はカッコを見逃していないことを願っています。 – Sirko

を：

スケーリング機能はシンプルかつ自動軸/伝説の作成に必要とされていない、1は、簡単な書くことができるということであるならば関数そのもの。この場合、これは次のようになります。

function scale(x) { 
    switch(true){ 
    case x<=3: return "blue"; 
    case x<=6: return "black"; 
    default: return "green"; 
    } 
}

スケーリング機能は、測定値から表示値にマッピングすることに注意してください。 d3のより洗練された機能は必要ない場合もあります。

出典

2017-08-11 18:53:26 Sirko

この質問には既に受け入れられている回答がありますが、今後の読者にはこれを書いています。 OP（「私は4 & 6、範囲に応じだ3 & 1との間には青色であるものを色を設定する必要が黒であり、6を超えるものは赤」）によって記載された動作を考える

ここで正しいスケールはスレッショルドスケールです。 APIによると

：彼らはあなたが範囲内の離散的な値に任意のサブセットドメインのをマッピングできるようにする以外

しきい値のスケールは、スケールを量子化するために似ています。入力ドメインは依然として連続的であり、の閾値のセットに基づいてスライスに分割されます。範囲はn値を持っている場合、ドメインはn - 1値を持っている必要があり、しきい値規模で
var color = d3.scaleThreshold() 
 
    .domain([4, 6]) 
 
    .range(["blue", "black", "red"]); 
 

 

 
console.log("color for 1 is :" + color(1)) 
 
console.log("color for 2 is :" + color(2)) 
 
console.log("color for 3 is :" + color(3)) 
 
console.log("color for 4 is :" + color(4)) 
 
console.log("color for 5 is :" + color(5)) 
 
console.log("color for 6 is :" + color(6)) 
 
console.log("color for 200 is :" + color(200))
<script src="https://d3js.org/d3.v4.min.js"></script>
：ここで（強調鉱山）

は、基本的なデモです。したがって、上記のデモでは：4未満

var color = d3.scaleThreshold() 
    .domain([4, 6]) 
    .range(["blue", "black", "red"]);

何がblueにマップされます。 4〜6未満はblackにマッピングされます。そして6以上はredにマップされます。

この尺度は、多くのしきい値をすばやく定義できるので便利です。例えば、

var color = d3.scaleThreshold() 
    .domain([2, 5, 10, 20, 50, 80]) 
    .range(["white", "yellow", "lime", "green", "blue", "orange", "red"]);

のような便利な方法もあります。

PS：尋ねられたとおり、デモの縮尺は1から始まらない。そのためには、ドメインの最初の値として1を追加し、範囲内に新しい値を追加して、1より小さい値の色を指定します（ある場合）。

出典

2017-08-12 00:36:44

d3.scaleQuantizeの代わりに？

答えて

関連する問題