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 rects中添加数字以显示每种颜色所涵盖的范围值。 color.ticks(11)仅返回360处定义的中点的值。无论我把什么价值放入刻度线，我都只返回到中点的值。

Answer 1

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

返回域[x0，x1]中值的范围，用于范围内的相应值：量化的倒数。

这是它的工作原理，返回每个颜色的底部和顶部值的数组：

＆＃13;

var color = d3.scaleQuantize()
  .domain([0, 1600])
  .range(d3.schemeRdYlGn['11'].reverse());

color.range().forEach(function(d){
	console.log(color.invertExtent(d))
})

＆＃13;

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

＆＃13;

以下是使用您的代码的演示。我将值分开并将它们放在矩形下面：

＆＃13;

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])
    })

}

＆＃13;

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

＆＃13;

用于色标的D3图例

1 个答案: