dc.js, создавая цветовой диапазон между двумя цветами

Question

Я разрешаю пользователям выбирать одну из четырех числовых рядов из выпадающего списка, чтобы управлять раскраской кругов в пузырьковой диаграмме. (Есть аналогичные выпадающие для радиуса, х и у.)

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, в таком порядке. (В некоторых случаях я заметил, что порядок этих трех вопросов.) Я бы хотел, чтобы пользователи могли выбирать минимальные и максимальные цвета и управлять цветом. Для этого мне нужно окрасить пузырьки только из двух цветов, например. [ 'Белый', 'синий']. Более высокие числовые значения будут пропорционально более синими.

Кажется, очень легкая вещь, но я не могу ее решить. Поставка массива из двух цветов обычно используется для чередования, а в пузырьковой диаграмме минимальный пузырь белый, а остальные - синий. Как получить непрерывный цветовой диапазон, вводя только два цвета?

Thanks

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>