未知の型エラー：d3.schemeCategory20は関数ではありません

Question

私はd3jsとすべてのJavaScriptの世界でも新しいです。私のhtmlファイルでは、私は単純にそのようなスクリプトをインポートします。

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

次を使用しようとすると：

var ordinalColorScale = d3.schemeCategory20(); 

私は例外

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

を取得し、私は他のどのd3jsが必要ですモジュールをインポートする必要がありますか？または、何が問題を引き起こしたのでしょうか？

Answer 1

d3.schemeCategory20は縮尺も機能もありません。 アレイの色です。 APIによると、それは...

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

で同じAPIは言う：

：

These color schemes are designed to work with 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>

Answer 2

d3.schemeCategory20それはまさに関数ではありません。これはデフォルトの色の配列です。この配列をスケール関数に渡す必要があります。 D3はV4について

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

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

Answer 3

。あなたのように使用することができます

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