d3.js संकी आरेख: आयताकार रंग भरें

Question

तो मैं d3.js संकी आरेख के साथ खेल रहा हूं।

this example (ऊपर चित्र) रंग में प्रत्येक नोड एक आयत है के लिए

var color = d3.scale.category20(); 

का उपयोग कर परिभाषित किया गया है, और कहा कि आयत शैली बदलकर भर जाता है:

.style("fill", function(d) { 
    return d.color = color(d.name.replace(/ .*/, "")); 
}) 

मैं कस्टम रंगों का उपयोग करने के सुझावों की तलाश में हूं। अगर मैं केवल 6 रंगों का उपयोग करना चाहता था, लेकिन .json फ़ाइल में किसी मान के आधार पर नोड आयत रंगों को चुना गया है।

उदाहरण के लिए, मान लें कि मैं एनएफएल में टीमों का एक सांप चार्ट दिखाना चाहता हूं। रंग प्रत्येक प्रतिनिधित्व करते हैं कि टीम किस विभाजन में खेलती है। इसलिए यदि वे एक अलग विभाजन में जाते हैं, तो रंग बदल जाता है। और नोड हर मौसम के लिए बनाए जाते हैं। उन पंक्तियों के साथ कुछ।

तो यह

node.append("rect") 
    .attr("height", function(d) { return d.dy; }) 
    .attr("width", sankey.nodeWidth()) 
    .style("fill", function(d) { 
     return d.color = color(d.name.replace(/ .*/, "")); 
    }) 
    .style("stroke", function(d) { 
     return d3.rgb(d.color).darker(2); 
    }) 
    .append("title") 
    .text(function(d) { return d.name + "\n" + format(d.value); }); 

रंग के साथ

json फ़ाइल में एक मूल्य के आधार पर चलाने के लिए संभव है? मैं सिर्फ एक कथन कह रहा हूं, लेकिन क्या कोई आसान तरीका है? क्या मैं सिर्फ जेसन में हेक्स रंग कोड शामिल कर सकता हूं?

Answer 1

लगता है जैसे आप इस मामले में JSON में रंग शामिल करना चाहते हैं। आप इसे किसी भी तरह से शामिल कर सकते हैं जिसे ब्राउजर पहचानता है, उदा। एक नाम ("सफेद") या हेक्स ("# एफएफएफ") के रूप में। समर्थित रंग विनिर्देशों की पूरी सूची के लिए SVG spec देखें।

Answer 2

वैकल्पिक रूप से, आप documentation में वर्णित डी 3 ordinal पैमाने के साथ स्पष्ट रूप से विभाजन को रंगों को मानचित्र बना सकते हैं। नीचे colorbrwer देखें।

var color = d3.scale.ordinal() 
    .domain(["foo", "bar", "baz"]) 
    .range(["#fff","#000","#333"]); 

और फिर

.attr("fill", function(d) { return color(d.division); }); 

Answer 3

बदलें साथ const color = d3.scaleOrdinal(d3.schemeCategory20);:

const color = d3.scaleOrdinal() 
.domain(["Crude oil","Natural gas",...]) 
.range(["#FD3E35","#FFCB06",...]); 

और रहने के साथ:

.style('fill', (d,i) => { 
    d.color = color(d.name.replace(/ .*/, '')); 
    return d.color;})