आकार मूल्य

Question

पर आधारित सनबर्स्ट के प्रत्येक चाप रंग को मैं सनबर्स्ट चार्ट बनाने के लिए एनवीडी 3 के साथ काम कर रहा हूं। मैं आम तौर पर डी 3 के लिए नया हूं इसलिए मैं कुछ जटिल चीजों को दूर करने के लिए एनवीडी 3 का उपयोग कर रहा हूं। अभी मैं वेब से प्राप्त एक साधारण उदाहरण के साथ काम कर रहा हूं, लेकिन JSON में size विशेषता के आधार पर नोड्स (आर्क) को रंग देने का प्रयास कर रहा हूं। मैं जानता हूँ कि तो क्या मैं इतनी तरह का उपयोग करने की कोशिश की है कि कि NVD3 चार्ट विकल्पों में एक color फ़ंक्शन का उपयोग करने का विकल्प है:

chart: { 
     type: 'sunburstChart', 
     height: 450, 
     color: function(d) { 
     if (d.size > 3000) { 
      return "red"; 
     } else if (d.size <= 3000) { 
      return "green"; 
     } else { 
      return "gray"; 
     } 
     }, 
     duration: 250 
    } 

लेकिन जैसा कि आप plunker से देख सकते हैं मुझे लगता है कि सिर्फ भूरे रंग में परिणाम पर काम कर रहा हूँ , क्योंकि यह वास्तव में d.size से कोई मान नहीं प्राप्त कर रहा है (यह केवल अपरिभाषित है और मुझे यकीन नहीं है क्यों)।

var path = g.append("path") 
       .attr("class","myArc") 
       .attr("d", arc) 
       .attr("name",function(d){return "path Arc name " + d.name;}) 
       .style("fill", function(d) { 
       if(d.size > 3000) { 
        return "green"; 
       } else if(d.size < 3000){ 
        return "red"; 
       } else { 
        return "gray"; 
       } 
       }) 
       .on("click", click) 
       ... //etc 

मैं एक नियमित डी 3 सनबर्स्ट उदाहरण संशोधित किया था कि प्राप्त करने के लिए वांछित परिणाम के साथ:

नियमित डी 3 जो मैं से बचने के लिए कोशिश कर रहा हूँ का उपयोग करना, मैं इस से इच्छा परिणाम प्राप्त कर सकते हैं

मुझे पता है कि लेबल जैक हो गए हैं लेकिन यह यहां महत्वपूर्ण नहीं है। मैं नियमित डी 3 के समान परिणाम प्राप्त करना चाहता हूं लेकिन एनवीडी 3 के अमूर्तता के साथ। मुझे कोई अच्छा उदाहरण नहीं मिला है जो color: function() का उपयोग करके उल्लेख करता है। अग्रिम में धन्यवाद।

Answer 1

सबसे पहले GitHub वितरण से इन जावास्क्रिप्ट पुस्तकालयों का उपयोग:

<script src="http://krispo.github.io/angular-nvd3/bower_components/nvd3/build/nv.d3.js"></script> 
<script src="http://krispo.github.io/angular-nvd3/bower_components/angular-nvd3/dist/angular-nvd3.js"></script> 

चार्ट विकल्प इस तरह होना चाहिए:

$scope.options = { 
    "chart": { 
     "type": "sunburstChart", 
     "height": 450, 
     "duration": 250, 
     "width": 600, 
     "groupColorByParent": false,//you missed this 
     color: function(d, i) { 
     //search on all data if the name is present done to get the size from data 
     var d2 = d3.selectAll("path").data().filter(function(d1) { 
      return (d1.name == d) 
     })[0]; 
     //now check the size 
     if (d2.size > 3000) { 
      return "red"; 
     } else if (d2.size <= 3000) { 
      return "green"; 
     } else { 
      return "gray"; 
     } 
     }, 
     duration: 250 
    } 
    } 

काम कर कोड here