未捕获的类型错误：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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

d3.schemeCategory20 既不是标度也不是函数。它只是 一系列 颜色。根据 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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Sid Chou 发布，翻译遵循 CC BY-SA 4.0 许可协议