डी 3 वास्तविक समय streamgraph (ग्राफ़ डेटा विज़ुअलाइज़ेशन)

Question

मैं इस उदाहरण में एक धारा ग्राफ चाहते हैं: http://mbostock.github.com/d3/ex/stream.html

लेकिन मैं सही से प्रवेश वास्तविक समय डेटा पसंद है और पुराने डेटा होता है बाईं ओर से छोड़ दें, जैसे कि मेरे पास हमेशा 200 नमूने की खिड़की होती है। मैं ऐसा कैसे करूं कि मेरे पास उचित संक्रमण हो?

मैं सरणी एक में डेटा बिंदुओं को बदलने और उसके बाद इस तरह के

data0 = d3.layout.stack()(a); 

के रूप में एक क्षेत्र पुनः लेकिन मेरे बदलाव यह देखने के चार्ट की तरह स्क्रीन के पार फिसलने है नहीं बनाते हैं की कोशिश की।

अग्रिम धन्यवाद।

Answer 1

this tutorial का प्रयास करें:

जब समय श्रृंखला डेटा का वास्तविक समय प्रदर्शित करता है को लागू करने, हम अक्सर स्थिति के रूप में समय एन्कोड करने के लिए एक्स-अक्ष का उपयोग करें: समय के रूप में प्रगति के नए आंकड़ों सही, और पुराने से आती है डेटा बाईं ओर स्लाइड करता है। आप डी 3 के अंतर्निहित कुछ आश्चर्यजनक व्यवहार path interpolators, हालांकि, आप देख सकते हैं का उपयोग करते हैं ...

लचीलापन देता है को खत्म करने के लिए, अंतर्वेशन पथ बजाय बदलना। यह समझ में आता है यदि आप किसी फ़ंक्शन को विज़ुअलाइज़ करने के रूप में चार्ट के बारे में सोचते हैं- इसका मान बदल नहीं रहा है, हम केवल डोमेन का एक अलग हिस्सा दिखा रहे हैं। एक ही दर है कि नए डेटा आता है पर दिखाई खिड़की फिसलने से, हम मूल रियल टाइम डेटा प्रदर्शित कर सकते हैं ...

Answer 2

यहाँ एक सरल उदाहरण है: http://jsfiddle.net/cqDA9/1/ यह ट्रैक रखने और विभिन्न अद्यतन करने के लिए एक संभव समाधान से पता चलता डेटा श्रृंखला

var update = function() { 
    for (Name in chart.chartSeries) { 
     chart.chartSeries[Name] = Math.random() * 10; 
    } 
    for (Name in chart2.chartSeries) { 
     chart2.chartSeries[Name] = Math.random() * 10; 
    } 
    setTimeout(update, 1000); 
} 
setTimeout(update, 1000);