Question

我有一个气泡图，我必须根据＆＃39; admit_probability＆＃39;来为不同的气泡指定颜色。来自输入。我使用了4种不同的范围来自＆＃39; red＆＃39;到蓝色＆＃39;我的admit_probailites从0到100。所以，我想分配颜色，使得admit_probability较低的气泡有＆＃34;红色＆＃34;颜色和高颜色有＆＃34;蓝＆＃34;颜色和颜色逐渐变化。

以下是我的数据：

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

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

阈值刻度与量化刻度类似，但它们允许您将域的任意子集映射到的离散值范围。输入域仍然是连续的，并分成片基于一组阈值（API documentation）

这看起来像：

var color = d3.scaleTreshold()
                .domain(thresholds)
                .range(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>

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

1 个答案: