d3.scaleSequential"插值器不是函数"

Question

我正在为D3 v4和D3 Scale Chromatic编写用于发散数字的连续色标.

这是我的功能:

var divergentColor = function(value, theDomain, interpolation) {
    var theDomain = theDomain || [0, 50, 100];
    var theInterpolation = interpolation || 'BrBg';

    var scale = d3.scaleSequential()
      .interpolator(d3['interpolate' + theInterpolation])
      .domain(theDomain)
      .clamp(true);

    return scale(value);
};
  
divergentColor(25);

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

调用此函数时出现以下错误:

d3.v4.js:12808 Uncaught TypeError: interpolator is not a function

这是D3的实现scaleSequential:https://github.com/d3/d3-scale/blob/master/src/sequential.js#L21

import {linearish} from "./linear";

export default function sequential(interpolator) {
  var x0 = 0,
      x1 = 1,
      clamp = false;

  function scale(x) {
    var t = (x - x0) / (x1 - x0);
    return interpolator(clamp ? Math.max(0, Math.min(1, t)) : t);
  }

  scale.domain = function(_) {
    return arguments.length ? (x0 = +_[0], x1 = +_[1], scale) : [x0, x1];
  };

  scale.clamp = function(_) {
    return arguments.length ? (clamp = !!_, scale) : clamp;
  };

  scale.interpolator = function(_) {
    return arguments.length ? (interpolator = _, scale) : interpolator;
  };

  scale.copy = function() {
    return sequential(interpolator).domain([x0, x1]).clamp(clamp);
  };

  return linearish(scale);
}

这似乎是一个相当简单的功能.不确定我做错了什么,或者D3本身是否存在问题.有什么建议？

Answer 1

我收到此错误消息,因为我无法导入d3-scale-chromatic.我没有意识到它不是默认d3命名空间的一部分.

基本上,我从这样的事情开始:

import * as d3 from 'd3';
var color = d3.scaleSequential(d3.interpolatePiYG);

而修复方法是将其更改为:

import * as d3 from 'd3';
import * as d3Chromatic from 'd3-scale-chromatic';
var color = d3.scaleSequential(d3Chromatic.interpolatePiYG);

安装后使用npm install d3-scale-chromatic.