Question

我是d3js和所有javascript世界的新手。在我的html文件中，我只需导入脚本：

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

尝试使用以下内容：

var ordinalColorScale = d3.schemeCategory20();

我得到了例外

未捕获的TypeError：d3.schemeCategory20不是函数 index.html的：48

我是否需要任何其他必须导入的d3js模块？或者可能导致问题的原因是什么？

Answer 1

（v5） D3不再提供d3.schemeCategory20 *分类配色方案。这些二十种颜色方案存在缺陷，因为它们的分组设计可能错误地暗示数据中的关系：共享的色调可能暗示编码的数据是组的一部分（超类别），而相对亮度可能暗示顺序。取而代之的是，D3现在包括d3比例色度，它实现了ColorBrewer的出色方案，包括分类，发散，顺序单色调和顺序多色调方案。这些方案有离散和连续两种形式。

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

Answer 2

d3.schemeCategory20既不是规模也不是功能。它只是一种数组的颜色。根据{{3}}，它是......

由20个分类颜色组成的数组，表示为RGB十六进制字符串。

相同的API说：

这些颜色方案旨在与d3.scaleOrdinal一起使用。

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

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

以下是：

    var myScale = d3.scaleOrdinal(d3.schemeCategory20)

这是一个演示：

＆＃13;

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

＆＃13;

div {
  min-height: 10px;
}

＆＃13;

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

＆＃13;

Answer 3

对于d3 v4。您可以像

一样使用

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

Answer 4

d3.schemeCategory20这不是一个功能。它是一组默认颜色。您应该将此数组传递给缩放函数。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

对于在将来的d3版本中正在寻找它的任何人，以及使用此配色方案时要考虑的事项。 D3 5.0中的更改：

D3不再提供d3.schemeCategory20 *分类颜色计划。这些二十种配色方案存在缺陷，因为它们组合在一起设计可能错误地暗示数据中的关系：共享的色相可以暗示编码的数据是一个组的一部分（超类），而相对轻便可以暗示秩序

来自 d3/CHANGES.md

未捕获的TypeError：d3.schemeCategory20不是函数

5 个答案: