使用d3.scale.threshold()时为特定值设置颜色 [英] Setting color for a particular value when using d3.scale.threshold()

问题描述

我的代码将蓝色表示50-150之间的值，将黄色表示大于150的值.我正在尝试将新颜色添加到我的色标中，将白色精确地设置为零.当我将新颜色添加到范围中时，请说[白色，绿色，蓝色，黄色].它消除了黄色，仅映射了该范围内的前三种颜色.有了阈值标度，我们甚至可以为完全等于零的值设置颜色吗?

现在，我在代码中设置了秤，如下所示:

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

我尝试了几个在堆栈上指定的小提琴示例，这些示例可以正常工作，但不适用于我的情况.

解决方案

您可以在填充"属性中使用 if 设置特定的颜色值，但是可以使用阈值刻度也一样您的问题只是域.根据API:

如果刻度范围内的值数为N + 1，则刻度域中的值数必须为N.

因此，您必须像这样定义色阶:

  var scale = d3.scale.threshold().range([白色"，绿色"，蓝色"，黄色"]).domain([0.001，100，150]); 

使用上面的标度，任何低于0.001的值都将与白色"相关联，在0.001和100之间的值将与绿色相关联，在100和150之间的颜色将与蓝色相关联，而在150以上的颜色将与黄色相关联.

如果您只需要将白色设置为完全等于零的值，则创建一个if:

  .attr("fill"，function(d){if(d === 0){返回白色"} 别的 {//您的其他"条件}}); 

检查此代码段(查看 data 中的值和圆圈的颜色):

  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").append("svg").attr("width"，500).attr("height"，200);var circle = svg.selectAll(.circles").data(数据).进入().append("circle")circle.attr("r"，20).attr("cy"，50).attr("cx"，function(d，i){return 30 + i * 60}).attr("stroke"，"gray").attr("fill"，function(d){return colors(d)});  

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

My code colors blue for values ranging from 50-150, colors Yellow for values grater than 150. I am trying add new colors to my color scale white for value that are exactly equal to zero. When I add a new color to the range say [WHITE, GREEN, BLUE, YELLOW]. It eliminates yellow and maps only the first three colors in the range. With the threshold scale can we even set colors for values that are exactly equal to zero?

Right now I have my scale set up in my code like this :

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

I have tried couple of fiddle examples specified on stack overflow those examples work but they don't work for my case.

解决方案

You can set a specific color value with an if inside the "fill" atribute, but you can do that with the threshold scale as well. Your problem here is just the domain. According to the API:

If the number of values in the scale's range is N + 1, the number of values in the scale's domain must be N.

So, you have to define your color scale like this:

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

With the scale above, any value below 0.001 will be associated to "white", between 0.001 and 100 to green, between 100 and 150 to blue and above 150 to yellow.

If you need to set white only to values exactly equal to zero, create an if:

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

Check this snippet (look at the values inside data and the colors of the circles):

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")
	.append("svg")
	.attr("width", 500)
	.attr("height", 200);
	
var circles = svg.selectAll(".circles")
	.data(data)
	.enter()
	.append("circle")
	
circles.attr("r", 20)
	.attr("cy", 50)
	.attr("cx", function (d, i){ return 30 + i*60})
	.attr("stroke", "gray")
	.attr("fill", function(d){ return colors(d)});

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

这篇关于使用d3.scale.threshold()时为特定值设置颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！