What happened to d3.interpolateGnBu

问题

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

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

this works with

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

so why doesn't GnBu work anymore?

It exists: https://apimirror.com/d3~4/d3-scale-chromatic#interpolateBuGn

回答1:

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.

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>

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>

来源：https://stackoverflow.com/questions/48172901/what-happened-to-d3-interpolategnbu

标签

d3.js

colors