dc.js制作两种颜色之间的颜色范围

Question

我让用户从下拉列表中选择四个数字系列中的一个，以驱动气泡图中圆形的着色。 （有半径为，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，颜色和colorDomain，按照这个顺序。 （在某些情况下，我注意到这三个问题的顺序）。我希望用户能够选择最小和最大颜色，并从中驱动着色。为此，我需要为两种颜色的气泡着色，例如[ '白色'， '蓝']。较高的数字值会比例更蓝。

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

谢谢

Answer 1

d3知道如何插入颜色之间。您可以在范围（输出值）为颜色的位置创建线性比例。

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

下面是一个示出了在集百分比由比例产生各种颜色的示例（其中，0％是全白的，100％是所有蓝色）。

var ele = d3.select('#holder'); 
 

 
var width = 500; 
 
var height = 25; 
 
var margin = 30; 
 

 
// these are the values in the domain 0 to 1 for which 
 
// we will draw bands (whose color is somewhere between 
 
// white and blue). 
 
var percents = [0, 0.1, 0.25, 0.5, 0.75, 0.9, 1]; 
 

 
// a continuous scale from 'white' to 'blue' 
 
var colorScale = d3.scale.linear() 
 
    .domain([0, 1]) 
 
    .range(['white', 'blue']) 
 

 
var x = d3.scale.ordinal() 
 
    .domain(percents) 
 
    .rangeBands([0, width]); 
 

 
var g = ele.append('svg') 
 
    .attr('width', width + 2*margin) 
 
    .attr('height', height + 2*margin) 
 
    .append('g') 
 
    .attr('transform', 'translate(' + margin + ',' + margin + ')'); 
 

 
// axis 
 
var axis = d3.svg.axis() 
 
    .orient('bottom') 
 
    .scale(x) 
 
    .tickFormat(d3.format('.2f')) 
 

 
g.append('g') 
 
    .classed('x axis', true) 
 
    .call(axis); 
 

 
var values = g.append('g') 
 
    .classed('percents', true) 
 
    .selectAll('g.percent') 
 
    .data(percents) 
 
    .enter().append('g') 
 
    .classed('percent', true) 
 
    .attr('transform', function(d){ 
 
    return 'translate(' + x(d) + ',-10)'; 
 
    }); 
 

 
var bandwidth = x.rangeBand(); 
 
values.append('rect') 
 
    .attr('x', 0) 
 
    .attr('width', bandwidth) 
 
    .attr('y', -25) 
 
    .attr('height', 25) 
 
    // use the colorScale to determine the color of each band 
 
    .style('fill', colorScale);

.domain, .tick line { 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width: 1px; 
 
    shape-rendering: crispEdges; 
 
}

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