javascript - Uncaught TypeError: d3.schemeCategory20 is not a function - Stack Overflow

admin管理员组

文章数量:1186133

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

<script src=".v4.min.js"></script>

By trying to use following:

var ordinalColorScale = d3.schemeCategory20();

I get the exception

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

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

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>

By trying to use following:

var ordinalColorScale = d3.schemeCategory20();

I get the exception

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

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

• javascript
• d3.js

Share Improve this question Follow edited Nov 1, 2017 at 10:39 Luis Eduardo 4722 silver badges1212 bronze badges asked Nov 1, 2017 at 10:37 Ira ReIra Re 79033 gold badges99 silver badges2828 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 9

(v5) D3 no longer provides the d3.schemeCategory20* categorical color schemes. These twenty-color schemes were flawed because their grouped design could falsely imply relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while relative lightness can imply order. Instead, D3 now includes d3-scale-chromatic, which implements excellent schemes from ColorBrewer, including categorical, diverging, sequential single-hue and sequential multi-hue schemes. These schemes are available in both discrete and continuous variants.

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

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

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

The same API says:

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)

Which is the same of:

    var myScale = d3.scaleOrdinal(d3.schemeCategory20)

Here is a demo:

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>

For d3 v4. You can use like as

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

For anyone who is looking for it in future d3 versions and also something to consider when using this color scheme. Changes in D3 5.0:

D3 no longer provides the d3.schemeCategory20* categorical color schemes. These twenty-color schemes were flawed because their grouped design could falsely imply relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while relative lightness can imply order

from d3/CHANGES.md

d3.schemeCategory20 it is exactly not a function. It is an array of default colors. You should pass this array to your scale function.

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

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

本文标签： javascriptUncaught TypeError d3schemeCategory20 is not a functionStack Overflow