根据来自输入的百分比值为气泡分配颜色

Question

我有一个气泡图，我必须根据来自输入的 'admit_probability' 为不同的气泡分配颜色。我使用了从 'red' 到 'blue' 的 4 个不同范围，我的 admit_probailites 从 0 到 100.So，我想分配颜色，使 admit_probability 较低的气泡有 "red" 颜色，高的有 "blue" 颜色，并且颜色逐渐变化。

以下是我的数据：

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";
            }
      }

Answer 1

线性刻度将在范围内的值之间进行插值。您想要一个阈值比例：

Threshold scales are similar to quantize scales, except they allow you to map arbitrary subsets of the domain to discrete values in the range. The input domain is still continuous, and divided into slices based on a set of threshold values (API documentation)

这看起来像：

var color = d3.scaleTreshold()
                .domain(thresholds)
                .range(colors)

其中 thresholds 是一个包含阈值的数组，colors 是一个包含颜色的数组（在本例中）。假设一个非常基本的阈值图有两个阈值，您将需要三种颜色：一种用于低于第一个阈值，一种用于两个阈值之间，一种用于高于第二个阈值。

对于您的数据，有四种颜色，您需要三个阈值（我不确定它们是什么，因为您的第二个代码块只有两个），例如：

var color = d3.scaleThreshold()
                .domain([40,75,90])
                .range(["red","yellow","green","blue"]);

40 以下的值为红色，超过 40 至 75 的值为黄色，超过 75 至 90 的值为绿色，而 90 以上为蓝色。

示例：

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>

根据来自输入的百分比值为气泡分配颜色

Assign colors to bubbles based on percentage value coming from input

javascript

bubble-chart

colors

d3.js