D3.js v4.0 d3.scale.category10 () के बराबर क्या है?

Question

मैं इंटरएक्टिव वेब विज़ुअलाइज़ेशन पुस्तक के साथ d3 सीखने की कोशिश कर रहा हूं, लेकिन संस्करण 4.0 के साथ बहुत कुछ बदल गया है। एक चीज जो मैं वास्तव में समझ नहीं पा रहा हूं वह यह है कि रंगों के लिए आसान मैपिंग प्राप्त करने के लिए d3.scale.category10 () के बराबर है। क्या नए संस्करण में ऐसा कुछ है या हमें गणित का उपयोग करने की आवश्यकता है। आयामी और स्वयं कुछ कोड करें?

Answer 1

के बजाय

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))

यहाँ पढ़ें

यहाँ संदर्भ

यहाँ काम कोड

Comments

धन्यवाद! मैं सिर्फ परिवर्तन दस्तावेज़ के माध्यम से स्क्रॉल कर रहा था और अंत में स्पष्टीकरण पाया।

— अभिषेक

कोई फर्क नहीं पड़ता कि आप color()अपने काम के कोड में कितनी संख्या में आपूर्ति करते हैं , आउटपुट हमेशा नीला और नारंगी होता है - क्या यह अपेक्षित व्यवहार है? अगर मुझे बैंगनी चाहिए तो क्या होगा?

— dbj44

यह एक समाधान प्रतीत होता है, जिसे मैं उम्मीद कर रहा था:color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));

— dbj44

`आपके वर्किंग कोड में, आउटपुट हमेशा नीला और नारंगी होता है - क्या यह अपेक्षित व्यवहार है?` कोई भी उम्मीद नहीं है कि मुझे यहाँ हरा नहीं मिल रहा है plnkr.co/edit/2DzxaDg1SjidDkz5v2P2p?p=preview

— सिरिल चेरियन

Answer 2

D3.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

उम्मीद है की वो मदद करदे।