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，colors和colorDomain。（我在某些情况下注意到这三个问题的顺序。）我希望用户能够选择最小和最大颜色，并从中驱动着色。为此，我需要从两种颜色着色气泡，例如， [＆＃39;白色＆＃39;＆＃39;蓝色＆＃39]。较高的数值将成比例地更蓝。

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

由于

Answer 1

d3知道如何在颜色之间进行插值。您可以创建一个线性比例，其中范围（输出值）是颜色。

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

下面是一个示例，显示按比例设置百分比生成的各种颜色（其中0％全部为白色，100％全部为蓝色）。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: