2012-12-27 31 views
6

मैं निम्नलिखित की तरह एक प्रारूप के साथ एक JSON फ़ाइल के साथ डी 3 का उपयोग करना:एक बहु-आयामी सरणी/वस्तु

{ 
    "John":{ 
     "name":"John", 
     "counts":[ 1, 5, 10, 6 ] 
    }, 
    "Steve":{ 
     "name":"Steve", 
     "counts": [ 6, 4, 50, 40 ] 
    } 
} 

मैं एक डी 3 दृश्य है कि उन की गिनती के लिए एक सरल स्तंभ चार्ट करता है कोशिश कर रहा हूँ , बाईं ओर एक नाम लेबल के साथ। जब मैं एक एकल डेटा श्रृंखला और एक नाम है मैं यह इतना की तरह कर सकते हैं:

svg.selectAll("rect").data([ 1, 5, 10, 6 ]).enter().append("rect") 
      .attr("x",function(d,i) { return i*columnWidth; }) 
      .attr("y",function(d) { return (rowHeight-scale(d));}) 
      .attr("width",columnWidth) 
      .attr("height",function(d) { return snowScale(d); }); 

svg.selectAll("text").data("John").enter().append("text") 
     .text(function(d) { return d; }) 
     .attr("x",nameBuffer) 
     .attr("y",function(d,i) { return rowHeight; })    
     .attr("font-size", "14px"); 

यह बाईं ओर बंद डेटा सीधे आपूर्ति के साथ एक ही पंक्ति के लिए काम करता है, पाठ लेबल के साथ और फिर कॉलम की एक श्रृंखला प्रत्येक डेटापॉइंट के लिए समान चौड़ाई के। लेकिन मैं सिर्फ डी 3 के साथ शुरू कर रहा हूं, और मैं अपने जीवन के लिए यह नहीं समझ सकता कि प्रत्येक वस्तु के माध्यम से कुछ लूप कैसे करें और प्रत्येक के लिए एक नई पंक्ति बनाता है, प्रत्येक बार लंबवत ऑफसेट में जोड़ता है।

मैं फ़ाइल में प्रत्येक ऑब्जेक्ट के लिए एक बनाने के लिए कैसे लूप कर सकता हूं, और फिर प्रत्येक पंक्ति के लिए टेक्स्ट + कॉलम बना सकता हूं, जबकि विभिन्न नेस्टेड मानों और सरणी सूचकांक को संरक्षित करता है?

उत्तर

6

आप जो चाहते हैं उसे प्राप्त करने की कुंजी नेस्टेड चयनों का उपयोग करना है। विचार है कि अपनी संपूर्ण डेटा ऑब्जेक्ट को पहले स्तर पर पास करें और तत्वों के लिए एक एसवीजी समूह बनाएं। उन तत्वों में से प्रत्येक के लिए, वास्तविक विज़ुअलाइजेशन को तब भी उसी तरह जोड़ा जाता है जो आप अभी कर रहे हैं।

Mike's tutorial on nested selections पर एक नज़र डालें। अपने वर्तमान हार्डकोडेड डेटा कॉल को संबंधित तत्वों के साथ प्रतिस्थापित करना याद रखें, उदा। .enter([1, 5, 10, 6]) के बजाय .data(d.counts)

संबंधित मुद्दे