d3色标-与多种颜色呈线性?

fslejnso  于 2023-05-29  发布在  其他
关注(0)|答案(2)|浏览(147)

我试图创建一个有点像量化尺度的东西,但又像线性色标?
当我试图把多个颜色放进一个线性尺度时,它似乎只在前两个颜色之间缩放。
我想像一个量化规模多个颜色,但这些颜色之间的褪色。我不确定这是否可能。

//red and green works ok
var color = d3.scale.linear()
            .range(['red','green']);

//doesn't work - only red and green show
var color = d3.scale.linear()
            .range(['red','green', 'blue']);

//red green and blue show, however it doesn't fade between the colors
var color = d3.scale.quantize()
            .range(['red','green', 'blue']);
ma8fv8wu

ma8fv8wu1#

您必须使用域'pivot'值,如:

d3.scale.linear()
    .domain([0, pivot, max])
    .range(['red', 'green', 'blue']);

来自连续标度域的文档:
虽然连续比例通常在其定义域和范围中各有两个值,但指定两个以上的值会产生分段比例。例如,要创建在白色和红色之间插值(负值),在白色和绿色之间插值(正值)的发散色标,例如:

var color = d3.scaleLinear()
    .domain([-1, 0, 1])
    .range(["red", "white", "green"]);

color(-0.5); // "rgb(255, 128, 128)"
color(+0.5); // "rgb(128, 192, 128)"
tf7tbtn2

tf7tbtn22#

如果你想混合3种颜色,Anto的解决方案效果很好。在我的例子中,我需要一种方法来混合任意数量的颜色。对我来说,诀窍是正确地设置域。例如,下面的颜色数组:

var colors = ['#084594', '#2171b5', '#4292c6', '#6baed6', '#9ecae1', '#c6dbef', '#eff3ff'];

您可以创建一个域数组,其值从-1到+1,如下所示:

var domain = [-1];
    var increment = 2/(colors.length-1);
    for (var i=0; i<colors.length-2; i++){
        var previous = domain[domain.length-1];
        domain.push(previous+increment);
    }
    domain.push(1);

一旦创建了域数组,你就可以像这样创建一个颜色函数:

var getColor = d3.scaleLinear()
        .domain(domain)
        .range(colors);

如果你想获得特定百分比的颜色值(就像色度一样),你可以这样做:

var p = 0.25; //Valid range for p is 0.0-1.0
    var x = (p*2)-1;
    var color = d3.color(getColor(x));
    console.log(color.formatHex());

相关问题