未捕获的TypeError:d3.schemeCategory20不是函数 [英] Uncaught TypeError: d3.schemeCategory20 is not a function

问题描述

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

I'm new in d3js and all the javascript-world too. In my html-file I simply import the script like that:

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

尝试使用以下内容:

var ordinalColorScale = d3.schemeCategory20();

我得到了例外

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

Uncaught TypeError: d3.schemeCategory20 is not a function at index.html:48

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

Do I need any other d3js module, which has to be imported? Or what could have caused the problem?

推荐答案

d3.schemeCategory20既不是小数位数也不是函数.它只是颜色的阵列.根据 API ，它是...

d3.schemeCategory20 is neither a scale nor a function. It is just an array of colours. According to the API, it is...

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

An array of twenty categorical colors represented as RGB hexadecimal strings.

相同的API说:

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

These color schemes are designed to work with d3.scaleOrdinal.

因此，您必须将其传递给顺序刻度作为其范围，如下所示:

Therefore, you have to pass it to an ordinal scale as its range, like this:

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>

这篇关于未捕获的TypeError:d3.schemeCategory20不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！