javascript - D3图例用于色标

我有这样的色标

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 rect添加数字以显示每种颜色覆盖的范围值。 color.ticks(11)仅返回直到360定义的中点的值。不管我在刻度线中输入什么值，我都只会返回到中点的值。

最佳答案

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


  返回范围[x0，x1]中范围内相应值的值范围：逆量化。


它是这样工作的，返回每种颜色的底值和顶值的数组：

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>

关于javascript - D3图例用于色标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43196546/