d3.interpolateGnBu发生了什么 [英] What happened to d3.interpolateGnBu

问题描述

所以我正在尝试使用GnBu配色方案制作连续的色标.

So I am trying to make a continuous color scale using the GnBu color scheme.

d3.scaleSequential(d3.interpolateGnBu).domain([0, 1])

这适用于

d3.scaleSequential(d3.interpolateViridis).domain([0, 1])

那么GnBu为什么不再起作用?

so why doesn't GnBu work anymore?

它存在: https://apimirror.com/d3~4/d3-scale-colour#interpolateBuGn

推荐答案

此方案不再是d3核心捆绑包的一部分.作为d3 v4模块化方法的一部分，这些基于颜色调制器的方案现在基于 d3-scale -色.因此，除了d3v4内核之外，您还需要包括此模块.

This scheme is no longer part of the d3 core bundle. As part of the modular approach to d3 v4, these color brewer based schemes are now based in d3-scale-chromatic. So you'll need to include this module in addition to the d3v4 core.

这是d3v4中的标度彩色模块的示例:

Here's an example of the scale-chromatic module in d3v4:

var scale = d3.scaleSequential(d3.interpolateGnBu).domain([1, 10])

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",200)
  
  
svg.selectAll()
  .data(d3.range(10))
  .enter()
  .append("rect")
  .attr("width",20)
  .attr("height",20)
  .attr("y",20)
  .attr("x", function(d) { return d* 25 + 20 })
  .attr("fill", function(d) { return scale(d); })
  .attr("stroke","black");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

如果您只想从模块中提取单个颜色插值器，则可以打开模块的非最小化版本并提取所需的颜色字符串，在这种情况下，请选择"f7fcf0e0f3fccdbcebc5a8ddb57bccc44eb3d32b8cbe0868ac084081"，将其拆分为颜色，然后将其放置数组中的颜色，并将该数组提供给d3.interpoloateRgbBasis():

If you just want to extract a single one of the color interpolaters from the module, you can open the module's non minimized version and extract the color string you need, in your case "f7fcf0e0f3dbccebc5a8ddb57bccc44eb3d32b8cbe0868ac084081", split it into colors, place those colors in an array, and feed the array to d3.interpoloateRgbBasis():

var interpolateGnBu = function() {
  return d3.interpolateRgbBasis(["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"]);
};

这就是模块中正在发生的事情，只是它存储了许多方案.参见下面的操作:

This is what is happening in the module, just that it stores many of these schemes. See this in action below:

var interpolateGnBu = function() {
  return d3.interpolateRgbBasis(["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"]);
};

var scale = d3.scaleSequential(interpolateGnBu()).domain([1, 10])

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",200)
  
  
svg.selectAll()
  .data(d3.range(10))
  .enter()
  .append("rect")
  .attr("width",20)
  .attr("height",20)
  .attr("y",20)
  .attr("x", function(d) { return d* 25 + 20 })
  .attr("fill", function(d) { return scale(d); })
  .attr("stroke","black");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

这篇关于d3.interpolateGnBu发生了什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！