D3.scale.category10 () için d3.js v4.0 eşdeğeri nedir?

Etkileşimli Web Görselleştirme kitabıyla d3 öğrenmeye çalışıyorum, ancak sürüm 4.0 ile çok şey değişti. Gerçekten anlayamadığım bir şey, d3.scale.category10 () 'un renklere kolay bir eşleme elde etmek için bir eşdeğeri olup olmadığıdır. Yeni sürümde buna benzer bir şey mi var, yoksa math.random kullanıp kendimiz bir şeyler mi kodlamamız gerekiyor?

d3.js

— anonigrits
kaynak

Yanıtlar:

143

Onun yerine

d3.scale.category10()

kullanım

d3.scaleOrdinal(d3.schemeCategory10);

Bunun gibi bir renk skalası oluşturun:

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

V3'teki ile aynı kodda bunun gibi rengi kullanın:

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

burayı oku

Referans burada

çalışma kodu burada

— Cyril Cherian
kaynak

Teşekkürler! Sadece değişiklik belgesinde geziniyordum ve sonunda açıklamayı buldum.

— anonygrits

Hangi numarayı verirseniz color()verin, çalışma kodunuzda çıktı her zaman mavi ve turuncudur - beklenen davranış bu mu? Ya mor istersem?

— dbj44

Bu beklediğim şeye bir çözüm gibi görünüyor:color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));

— dbj44

`Sizin çalışma kodunda, çıkış her zaman mavi ve turuncu -? Beklenen davranış olduğunu` Hayır ben burada yeşil alıyorum beklenen thats olan plnkr.co/edit/2DzxaDg1SjidDkz5v2P4?p=preview

— Cyril Cherian

Basit bir çözüm, d3.js'nin 4. sürümünde aşağıdaki renk ölçeklerini kullanmaktır:

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 farklı renk dizileridir. Böylece, şekli doldurmak için farklı indekslerini kullanabilirsiniz. Örneğin

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

Referans için buraya bir göz atın: http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

Umarım yardımcı olur.

— Shwetabharti
kaynak