javascript - 使用发散配色方案

Question

当我尝试在 d3 中应用发散配色方案时，例如d3.interpolateSpectral 具有顺序尺度，它总是返回:

Uncaught TypeError: t is not a function

由于我写的代码中没有“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>