未捕获的类型错误: d3.schemeCategory20 不是一个函数。

Question

我是d3js和整个JavaScript世界中的新手。在我的HTML文件中，我只需像这样导入脚本：

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

尝试使用以下内容：

var ordinalColorScale = d3.schemeCategory20();

我遇到了异常情况

未捕获的类型错误: d3.schemeCategory20 不是一个函数，位于 index.html 第 48 行

我需要导入其他的d3js模块吗？还是出现了什么问题？

- Ira Re

Answer 1

(v5) D3不再提供d3.schemeCategory20*分类颜色方案。这些20种颜色方案存在缺陷，因为它们的分组设计可能错误地暗示了数据之间的关系：共享色调可以暗示编码数据属于一组（超级类别），而相对亮度可以暗示顺序。相反，D3现在包括d3-scale-chromatic，该模块实现了来自ColorBrewer的优秀方案，包括分类、发散、单色调顺序和多色调顺序方案。这些方案都有离散和连续变体。

https://github.com/d3/d3/blob/master/CHANGES.md

- Sid Chou

Answer 2

不是比例尺也不是函数，它只是一个颜色数组。根据API，它是...

由二十个分类颜色组成的RGB十六进制字符串数组。

同样的API说：

这些颜色方案是为了与d3.scaleOrdinal一起使用而设计的。

因此，您必须将其作为范围传递给序数比例尺，如下所示：

var myScale = d3.scaleOrdinal()
    .range(d3.schemeCategory20)

这与以下相同：

    var myScale = d3.scaleOrdinal(d3.schemeCategory20)

这里有一个演示:

var scale = d3.scaleOrdinal(d3.schemeCategory20);

d3.select("body").selectAll(null)
  .data(d3.range(20))
  .enter()
  .append("div")
  .style("background-color", function(d){ return scale(d)})

div {
  min-height: 10px;
}

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

- Gerardo Furtado

Answer 3

如果使用d3 v4版本，可以按以下方式使用：

   var color = d3.scaleOrdinal(d3.schemeCategory20c);
                     or
    var color = d3.scaleOrdinal()
      .range(["red", "green", "blue", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

- Mahi

Answer 4

如果未来使用d3的版本，或者在使用此颜色方案时，以下内容值得考虑。D3 5.0中的更改:

D3不再提供d3.schemeCategory20*分类颜色方案。这些二十种颜色的方案存在缺陷，因为它们的分组设计可能会错误地暗示数据之间的关系：共享色调可以意味着编码数据属于一组（超类别），而相对轻度可以意味着顺序。

引用自 d3/CHANGES.md

- ill

Answer 5

d3.schemeCategory20 不是一个函数，而是一个默认颜色的数组。您应该将此数组传递给比例尺函数。

console.log('d3.schemeCategory20 ==> ', d3.schemeCategory20);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

- Mikhail Shabrikov