入力からの「admit_probability」に基づいて、さまざまなバブルに色を割り当てる必要があるバブルチャートがあります。「赤」から「青」までの4つの異なる範囲を使用し、admit_probailitesは0から100の範囲にあるため、admit_probabilityが低いバブルは「赤」、高いバブルは「青」の色になるように色を割り当てたいと思います。色が徐々に変化します。
以下は私のデータです：
var data = [{name: "A", rank: 1, student_percentile: 100.0,
admit_probability: 24},
{name: "B", rank: 45, student_percentile: 40.3,
admit_probability: 24},
{name: "C", rank: 89, student_percentile: 89.7,
admit_probability: 24},
{name: "D", rank: 23, student_percentile: 10.9,
admit_probability: 24},
{name: "E", rank: 56, student_percentile: 30.3,
admit_probability: 24},
{name: "F", rank: 34, student_percentile: 110,
admit_probability: 84}];
var color_range = ['#FF0000', '#FFFF00' ,'#008000', '#0000FF'];
var color = d3.scaleLinear()
.domain([0, d3.max(data, function (d) {
return +d.admit_probability;
})])
.range(color_range);
circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("opacity", 0.3)
.attr("r", 20)
.style("fill", function(d, i){
return color(i);
});
上記のコードを使用すると、赤い色の異なる色合いのみが表示され、緑、黄色、または青の色の泡は形成されません。問題を見つけることができません。
PS：私は次の解決策を使いたくありません：
function(d){
if(+d.admit_probability <= 40){
return "red";
}
else if(+d.admit_probability > 40 && +d.admit_probability <= 75){
return "yellow";
}
else{
return "green";
}
}
線形目盛は、範囲内の値の間を補間します。しきい値スケールが必要です。
しきい値スケールは、ドメインの任意のサブセットを範囲内の離散値にマップできることを除いて、量子化スケールに似ています。入力ドメインは引き続き継続的であり、一連のしきい値に基づいてスライスに分割されます（APIドキュメント）
これは次のようになります。
var color = d3.scaleTreshold()
.domain(thresholds)
.range(colors)
ここで、thresholdsはしきい値を保持する配列であり、colorsは色を保持する配列（この場合）です。2つのしきい値を持つ非常に基本的なしきい値グラフを想定すると、3つの色が必要になります。1つは最初のしきい値より下、1つは2つのしきい値の間、もう1つは2番目のしきい値より上です。
4色のデータの場合、次のような3つのしきい値が必要になります（2番目のコードブロックには2つしかないため、しきい値が何であるかはわかりません）。
var color = d3.scaleThreshold()
.domain([40,75,90])
.range(["red","yellow","green","blue"]);
値最大40は、それらの赤どこにある上90以上のものは青色であるが、イエロー75、75及び90緑色までにわたるものと40とアップ。
例：
var data = d3.range(100);
var color = d3.scaleThreshold()
.domain([40,75,90])
.range(["red","yellow","green","blue"]);
var svg = d3.select("body")
.append("svg")
.attr("width",400)
.attr("height",200);
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("height",10)
.attr("width",10)
.attr("y",function(d,i) { return Math.floor(i/10) * 12 + 10; })
.attr("x",function(d,i) { return i%10 * 12 + 10; })
.attr("fill", function(d) { return color(d); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加