dc.js macht einen Farbbereich zwischen zwei Farben

Question

Ich lasse Benutzer eine von vier numerischen Serien aus einem Dropdown auswählen, um die Färbung von Kreisen in einem Blasendiagramm zu fahren. (Es gibt ähnliche Dropdown-Listen für Radius, x und 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]]); 
}); 

Um dies zu tun, ich bin mit colorAccessor, Farben und colorDomain, in dieser Reihenfolge. (Ich habe in einigen Fällen festgestellt, dass die Reihenfolge dieser drei Dinge wichtig ist.) Ich möchte, dass Benutzer Min- und Max-Farben auswählen und die Farbgebung davon steuern können. Dazu muss ich die Blasen aus nur zwei Farben, z. ['weiß Blau']. Höhere numerische Werte wären proportional blauer.

Es scheint eine wirklich einfache Sache zu tun, aber ich kann es nicht erarbeiten. In der Regel wird abwechselnd ein Array mit zwei Farben verwendet, und in einem Blasendiagramm ist die minimale Blase weiß und der Rest blau. Wie bekomme ich einen kontinuierlichen Farbbereich durch die Eingabe von nur zwei Farben?

Danke

Answer 1

d3 weiß, wie man zwischen Farben interpoliert. Sie können eine lineare Skala erstellen, wobei der Bereich (Ausgabewerte) Farben sind.

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

Unten ist ein Beispiel, das durch die Waage in festgelegten Prozentsatz (wobei 0% alle wissen und 100% ist, ist alles, blau) erzeugen verschiedene Farben zeigt.

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>