बिग d3.js ग्राफ, कैनवास या सर्वर-साइड प्रतिपादन?

Question

मैं अपने python बैकएंड (वेबसाइट्स के माध्यम से) से भेजे गए टाइम्सरीज़ डेटा को देखने के लिए d3.js का उपयोग कर रहा हूं। एक ग्राफ के लिए सामान्य मात्रा में डेटा लगभग 120 प्रविष्टियां (डेटा के 2 घंटे, 1 मिनट प्रति मिनट) है। यह ठीक चल रहा है, हर मिनट अद्यतन हो जाता है।

लेकिन यह 1-मिनट-अंतराल में भी एक महीने या उससे अधिक (एक वर्ष तक हो सकता है) से डेटा को देखने में सक्षम होना चाहिए। एसवीजी के लिए इतनी मात्रा में डेटा प्रस्तुत करना बहुत अधिक है।

मैं निम्नलिखित विकल्प की सोच रहा हूँ:

• एक कैनवास में यह प्रतिपादन। क्या यह वास्तव में बहुत तेज़ है?
• हाईचर्ट.जेएस (~ 50k प्रविष्टियों के साथ एक डेमो देखा गया)
• सर्वर पर एसवीजी/जेपीजी/पीएनजी प्रस्तुत करना। उदा। D3.js सर्वर-साइड को प्रस्तुत करने पर कोई अनुभव उदा। phantom.js? मैं पहले से लिखित ग्राफ-मॉडल का पुन: उपयोग करना चाहता हूं। लेकिन यह भी कोई अन्य लाइब्रेरी हो सकती है जो डेटा प्रस्तुत करने में सक्षम है (पायथन के साथ ग्राफ उत्पन्न करें)

आप क्या सुझाएंगे?

Answer 1

ध्यान दें कि d3 जावास्क्रिप्ट के buffered arrays का उपयोग करने का समर्थन करता है। हजारों समय श्रृंखला डेटा बिंदुओं के साथ एसवीजी भूखंडों ने मेरे अनुभव में ठीक काम किया है (यहां तक ​​कि websockets के माध्यम से 20ms अपडेट पर लाइव डेटा स्ट्रीमिंग के कई स्रोतों के साथ)।

उदाहरण के लिए यदि आप पाइथन में अपना सभी डेटा पैक करते हैं;

this.ws.onmessage = function(e){ 
    // Just pump the raw bytes straight into CircularBuffer 
    graph.databuffer.push(e.data); 
    ... 

और:

import struct 
# fake data point 
p = [56435367, 200, 1] 
# <=little endian, d=float64 (for time), d=float64 
msg_str = struct.pack('<' + 'd' * len(p), *p) 
print(msg_str) 
b'\x00\x00\x008\x15\xe9\x8aA\x00\x00\x00\x00\x00\x00i@\x00\x00\x00\x00\x00\x00\xf0?' 

अपने WebSocket कि जावास्क्रिप्ट, जहाँ आप की तरह कुछ कर सकते हैं करने के लिए हो जाता है के माध्यम से

तब: आप के रूप में अपने अद्यतन दर अपेक्षाकृत धीमी है अपनी लाइव ध्यान में रखते हुए ऐसा करने की जरूरत नहीं हो सकता है यदि आप सभी डेटा अग्रिम राशि

// Get a Float64Array containing all the values 
var series_data = graph.databuffer.get_array_stream(); 
g.attr("d", graph.line(d3.zip(time, series_data))); 

स्वाभाविक रूप से इस और भी आसान होना चाहिए: जब आप प्लॉट करने के लिए चाहते हैं, यह मानते हुए ग्राम डी 3 svg करने के लिए अपने संदर्भ है। क्या आप शायद एक ही पथ के बजाय अंक प्लॉट कर रहे हैं? मैंने ब्राउज़र के हजारों व्यक्तिगत मंडलियों की साजिश रचने के साथ संघर्ष किया (विशेष रूप से यदि वे सभी 20ms स्थानांतरित होते हैं!) लेकिन वे बहुत आसानी से पथ को संभाल सकते हैं।