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

Ira*_* Re 3 javascript d3.js

我是d3js和所有javascript世界的新手.在我的html文件中,我只需导入脚本:

<script src="https://d3js.org/d3.v4.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

通过尝试使用以下内容:

var ordinalColorScale = d3.schemeCategory20();
Run Code Online (Sandbox Code Playgroud)

我得到了例外

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

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

小智 8

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

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


Ger*_*ado 6

d3.schemeCategory20既不是规模也不是功能.它只是一系列颜色.根据API,它是......

二十个分类颜色的数组,表示为RGB十六进制字符串.

相同的API说:

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

因此,您必须将其作为其范围传递到序数比例,如下所示:

var myScale = d3.scaleOrdinal()
    .range(d3.schemeCategory20)
Run Code Online (Sandbox Code Playgroud)

这是相同的:

    var myScale = d3.scaleOrdinal(d3.schemeCategory20)
Run Code Online (Sandbox Code Playgroud)

这是一个演示:

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)})
Run Code Online (Sandbox Code Playgroud)
div {
  min-height: 10px;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://d3js.org/d3.v4.min.js"></script>
Run Code Online (Sandbox Code Playgroud)


Mah*_*ahi 6

对于 d3 v4。您可以使用像

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