Javascript dc.js使颜色范围介于两种颜色之间

我让用户从下拉列表中选择四个数字系列中的一个来驱动气泡图中圆圈的着色。半径、x和y也有类似的下拉列表

d3.select("select#colour").on('change',function(d) {
  var tempIndex = this.selectedIndex;
  yearlyBubbleChart.colorAccessor(function (p) {
    return p.value[optionArray[0][tempIndex]];
  });
  yearlyBubbleChart.colors(colorbrewer[optionArray[7][tempIndex]][optionArray[8][tempIndex]]);
  yearlyBubbleChart.colorDomain([optionArray[5][tempIndex][0], optionArray[5][tempIndex][1]]);
});

为了做到这一点，我使用colorAccessor，colors和colorDomain，按照这个顺序。我注意到在某些情况下，这三者的顺序很重要。我希望用户能够选择最小和最大颜色，并从中驱动着色。为此，我只需要用两种颜色给气泡上色，例如[白色]、[蓝色]。数值越高，蓝色的比例就越大

这似乎是一件很容易做的事，但我做不出来。提供两种颜色的数组通常用于交替，在气泡图中，最小气泡为白色，其余为蓝色。如何通过只输入两种颜色来获得连续的颜色范围

---

谢谢，d3知道如何在颜色之间插值。可以创建线性比例，其中范围输出值为颜色

var colorScale = d3.scale.linear()
  .domain([0, 1])
  .range(['white', 'blue'])

下面是一个示例，显示了比例以设定百分比生成的各种颜色，其中0%为全白色，100%为全蓝色

var ele=d3。选择“持有人”； var宽度=500； var高度=25； var保证金=30； //这些是域0到1中的值 //我们将画颜色介于两者之间的带子 //白色和蓝色。 风险值百分比=[0,0.1,0.25,0.5,0.75,0.9,1]； //从“白色”到“蓝色”的连续刻度 var colorScale=d3.scale.linear .domain[0，1] .范围['白色'，'蓝色'] 变量x=d3.scale.ordinal .域名百分比 .范围带[0，宽度]； var g=ele.append'svg' .attr'width'，width+2*边距 .attr'height'，height+2*边距 .附加“g” .attr'transform'、'translate'+margin+'、'+margin+； //轴心 变量轴=d3.svg.axis .东方“底部” scalex先生 .tickFormat3.format'.2f' g、 附加“g” .分类为“x轴”，正确 .callaxis； var值=g。附加“g” .分类为“百分比”，正确 .选择所有“g.percent” .数据百分比 .enter.append'g' .分类为“百分比”，对 .attr'transform'，函数d{ 返回'translate'+xd+'，-10'； }; var带宽=x.量程； 值。附加'rect' .attr'x'，0 .attr'width'，带宽 .attr'y'，-25 .attr'height'，25 //使用colorScale确定每个波段的颜色 .样式“填充”，颜色刻度； .domain，.tick行{ 填充：无； 笔画：黑色； 笔画宽度：1px； 形状渲染：边缘清晰； }

---

这很酷，但水平很低。我认为色标在这里更合适。这里的关键是它可以采用任何类型的d3色标。如果你给它一个颜色数组，它会为你创建一个，但是你可以使用下面@Paul显示的线性比例，或者如果你把一个连续的域映射到一组离散的颜色，你也可以使用一个。是的，如果你，你会明白为什么你需要在colorDomain之前调用颜色-前者取代了比例，后者在当前比例上设置一个参数。