使用发散的配色方案

Question

当我尝试在 d3 中应用不同的配色方案时，例如d3.interpolateSpectral 具有顺序刻度，它总是返回：

未捕获的类型错误：t 不是函数

由于我写的代码中没有“t”，我想它与original colour scheme中的“t”有关 如果是，我不确定它是如何应用的，因为我参考了一个使用 that colour scheme 的示例，也没有“t”的地址

色标的相关代码如下：

var color=d3.scaleSequential(d3.interpolateSpectral);

color.domain([d3.min(data, function(d){return d.population;}), 
                            d3.max(data, function(d){return d.population;})]);

selection.style("fill", function(d){                    
    var value=d.properties.value;                   
    if(value){
        return color(value);
    } else{
        return "#ccc";
    }

任何帮助将不胜感激，谢谢！

Answer 1

鉴于您的错误，您可能正在使用 D3 v4。如果这是正确的，您必须参考 scale-chromatic 迷你库：

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

看看这个演示，如果不引用迷你库，我们会得到同样的错误（打开浏览器的控制台查看）：

var color = d3.scaleSequential(d3.interpolateSpectral);

console.log(color(1))

<script src="https://d3js.org/d3.v4.min.js"></script>

如果我们引用迷你库，我们不会再看到错误：

var color = d3.scaleSequential(d3.interpolateSpectral);

console.log(color(1))

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

最后，值得一提的是，使用 D3 v5，我们不必引用它：

var color = d3.scaleSequential(d3.interpolateSpectral);

console.log(color(1))

<script src="https://d3js.org/d3.v5.min.js"></script>