javascript - 色标的 D3 图例

Question

我有一个这样的色标

var colorscale=colorbrewer['RdYlGn']['11'].reverse();
var color=d3.scaleQuantize()
  .domain([0,360,1600])
  .range(colorscale);

我正在尝试将该色标显示为穿过我的 SVG 底部的图例

function drawColorScale(){
  var pallete=svg.append('g')
    .attr('id','pallete')
  var swatch=pallete.selectAll('rect').data(colorscale);
  swatch.enter().append('rect')
    .attr('fill',function(d){
      return d;//return rgb
    })
   .attr('x',function(d,i){
     return (i*30)+'';
    })
    .attr('y',function(d,i){
      return (height-12)+'';
    })
    .attr('width','30')
    .attr('height','10');
}

我想将数字添加到 svg 矩形以显示每种颜色涵盖的范围值。 color.ticks(11) 仅返回到 360 处定义的中点的值。无论我在刻度中输入什么值，我都只能返回到中点的值。

Answer 1

您可以使用 invertExtent 获取每种颜色的值，其中:

Returns the extent of values in the domain [x0, x1] for the corresponding value in the range: the inverse of quantize.

这是它的工作原理，返回包含每种颜色的底部和顶部值的数组:

var color = d3.scaleQuantize()
  .domain([0, 1600])
  .range(d3.schemeRdYlGn['11'].reverse());

color.range().forEach(function(d){
	console.log(color.invertExtent(d))
})

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

这是使用您的代码的演示。我将值分开并将它们放在矩形下方:

var svg = d3.select("svg");

var colorscale = d3.schemeRdYlGn['11'].reverse();
var color = d3.scaleQuantize()
  .domain([0, 1600])
  .range(colorscale);

var format = d3.format(".1f")

drawColorScale();

function drawColorScale() {
  var pallete = svg.append('g')
    .attr('id', 'pallete');

  var swatch = pallete.selectAll('rect').data(colorscale);
  swatch.enter().append('rect')
    .attr('fill', function(d) {
      return d;
    })
    .attr('x', function(d, i) {
      return i * 50;
    })
    .attr('y', 50)
    .attr('width', 50)
    .attr('height', 10);

  var texts = pallete.selectAll("foo")
    .data(color.range())
    .enter()
    .append("text")
    .attr("font-size", "10px")
    .attr("text-anchor", "middle")
    .attr("y", 80)
    .attr('x', function(d, i) {
      return i * 50 + 25;
    })
    .text(function(d) {
      return format(color.invertExtent(d)[0])
    })
    .append("tspan")
    .attr("dy", "1.3em")
    .attr('x', function(d, i) {
      return i * 50 + 25;
    })
    .text("to")
    .append("tspan")
    .attr("dy", "1.3em")
    .attr('x', function(d, i) {
      return i * 50 + 25;
    })
    .text(function(d) {
      return format(color.invertExtent(d)[1])
    })

}

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<svg width="600"></svg>