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

Как я уже говорил в моем comment, это просто опечатка: оно должно быть BrBG, не BrBg, так как название интерпол является d3.interpolateBrBG:

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); 
 
}; 
 
    
 
console.log(divergentColor(25));

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

PS : Ваш домен неверен. Из документации:

Следует отметить, что домен последовательной шкалы исключительно должен быть числовым и должен содержать ровно два значения. (Курсив мой)

Таким образом, он должен быть [0, 50] или [0, 100], или любую комбинацию из двух значений. Прямо сейчас, используя 3 значения, D3 сохранит первые два значения. Вы можете увидеть это в следующем фрагменте:

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

 
    console.log("The domain is: " + scale.domain()); 
 

 
    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>

Answer 2

Я получаю сообщение об ошибке, потому что я не смог импортировать 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.