D3.js

2013-04-26 13 views
11

D3.js में उपयोग के लिए एचटीएमएल में सीएसवी एम्बेड करना, आमतौर पर बाहरी सीएसवी फ़ाइल से डेटा लोड करता है। यह बड़े डेटा के लिए बहुत ही कुशल है, और डेटा बदलते समय कोड को बदलने से बचाता है।D3.js

  • एक पेज कि स्थानीय स्तर पर लोड किया जा सकता (यानी फ़ाइल से:

    हालांकि, वहाँ दो स्थितियों (केवल छोटे csv डेटा का उपयोग), जहां मैं एक HTML पृष्ठ में सीधे सीएसवी एम्बेड करना चाहते हैं ///), स्थानीय HTTP सर्वर चलाने की आवश्यकता के बिना।

  • स्टैक ओवरफ्लो पर उपयोग के लिए डी 3.जेएस प्रश्न समझाते हुए एक छोटा सा उदाहरण उदाहरण।

उत्तर

19

यह समाधान है जो मैंने D3.js API से उदाहरण का उपयोग करके किया है।

csv डेटा एम्बेड करना:

<pre id="csvdata"> 
    Year,Make,Model,Length 
    1997,Ford,E350,2.34 
    2000,Mercury,Cougar,2.38 
</pre> 

Hidding पृष्ठ पर कच्चे डेटा:

#csvdata { 
    display: none; 
} 

यह पार्स:

:

var raw = d3.select("#csvdata").text(); 
var parsed = d3.csv.parse(raw); 

वैकल्पिक रूप से, परिणाम दिखाने

d3.select("#parsed").text(JSON.stringify(parsed)); 
// Assuming <div id="parsed"></div> somewhere on the page 

अगर ऐसा लगता है कि यह त्रुटिपूर्ण है, या यदि आपके पास अधिक सुरुचिपूर्ण समाधान है, तो मैं खुशी से आपका जवाब स्वीकार करूंगा!

संपादित करें: इसे this fiddle

में कार्रवाई में देखें