web-dev-qa-db-ja.com

d3.scale.category10（）に相当するd3.js v4.0とは何ですか？

Interactive Web Visualizationブックでd3を学ぼうとしていますが、バージョン4.0では多くのことが変わりました。私が本当に理解できないことの1つは、d3.scale.category10（）に相当するものがあり、色への簡単なマッピングを取得するかどうかです。新しいバージョンにそのようなものがありますか、またはmath.randomを使用して自分で何かをコーディングする必要がありますか？

d3.js
68
anonygrits

の代わりに

d3.scale.category10()

つかいます

d3.scaleOrdinal(d3.schemeCategory10);

次のようなカラースケールを作成します。

var color = d3.scaleOrdinal(d3.schemeCategory10);

v3と同じコードで次のような色を使用します。

svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", color(3))

読み取り ここ

参照 ここ

作業コード ここ

115
Cyril Cherian

簡単な解決策は、d4.jsのバージョン4で次のカラースケールを使用することです。

var colorScale_1 = d3.schemeCategory10;
var colorScale_2 = schemeCategory20;
var colorScale_3 = d3.schemeCategory20b;
var colorScale_4 = d3.schemeCategory20c;

colorScale_1、colorScale_2、colorScale_3、colorScale_4は異なる色の配列です。したがって、異なるインデックスを使用して形状を埋めることができます。例えば

svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", colorScale_1[2])

参考のため、こちらをご覧ください： http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

お役に立てば幸いです。

1
shwetabharti