crossfilter, d3.brush और nvd3 एकीकरण

Question

मैं crossfilter मुखपृष्ठ

और वास्तव में क्या हो रहा है की तरह देखा है। लेकिन अगर मुझे जरूरत नहीं है तो मैं अपने सभी ग्राफ लिखना नहीं चाहता हूं। मैंने पहले से ही dc.js देखा है जो काफी अच्छा है और आपको क्रॉसफिल्टर एकीकरण और फ़िल्टरिंग में बनाया गया है।

हालांकि डीसी में कुछ सामान गुम हैं जो मुझे चाहिए जो मुझे nvd3 से मिलता है। हालांकि एनवीडी 3 के शीर्ष पर क्रॉसफिल्टर के माध्यम से क्रॉस ग्राफ़ फ़िल्टरिंग (ब्रश या क्लिक इत्यादि के साथ) किसी भी प्रकार का क्रॉस ग्राफ़ फ़िल्टरिंग प्राप्त करना बहुत काम करता है। मैंने कहीं भी इस काम के किसी भी प्रकार को देखा या सुना नहीं है, लेकिन यह nvd3 की प्राकृतिक प्रगति की तरह लगता है।

क्रॉस ग्राफ फ़िल्टरिंग और crossfilter को nvd3 में जोड़ना आसान है और क्या मैं बस इसके बारे में जाने के लिए एक सीधा दिख रहा हूं?

लोग इसे कैसे पूरा कर रहे हैं?

धन्यवाद।

Answer 1

डीसी अच्छा है क्योंकि आप सीधे ग्राफ ऑब्जेक्ट्स में आयामों और समूहों में प्रवेश कर सकते हैं और आपको क्रॉसफ़िल्टर में परिवर्तनों पर मैन्युअल रूप से अपडेट करने की आवश्यकता नहीं है।

यदि आप क्रॉसफिल्टर और एनवीडी 3 को एक साथ जोड़ना चाहते हैं, तो आपको क्रॉसफिल्टर आयामों/समूहों की स्थिति में परिवर्तनों पर एनवीडी 3 डोमेन/रेंज या डेटा मैन्युअल रूप से अपडेट करना होगा। यह मूल रूप से क्रॉसफिल्टर पेज उदाहरण को संभालता है यदि आप स्रोत को चेक करते हैं: http://square.github.io/crossfilter/। जब भी ब्रश बदलते हैं, तो ग्राफ को फिर से खींचा जाता है और परिवर्तनों को प्रतिबिंबित करने के लिए अद्यतन किया जाता है।

नए डेटा को फिर से निकालने और प्रतिबिंबित करने के लिए एनवीडी 3 चार्ट प्राप्त करना आसान है। आप बस डेटम अपडेट कर सकते हैं और फिर बारकार्ट को कॉल कर सकते हैं ... उदाहरण के लिए।

var svg = d3.select("body").append("svg").style("height", "500px"); 
var barChart = nv.models.multiBarChart(); 

// Just execute this block each time the chart data changes 
// and the chart will update in a nicely animated manner 
svg 
    .datum(chartData) 
    .transition() 
    .duration(500) 
    .call(barChart); 

मुश्किल हिस्सा वास्तव में होगा यदि आप एनवीडी 3 चार्ट में ब्रश बनाना चाहते थे। यह मुश्किल हो सकता है क्योंकि आपको ब्रश को एनवीडी 3 चार्ट के साथ सिंक किया जाना चाहिए क्योंकि उनका डेटा बदल गया है ताकि वे सही तरीके से आकर्षित हो जाएं, लेकिन यदि आप सिर्फ अन्य चार्ट की ब्रश घटनाओं के आधार पर एनवीडी 3 चार्ट अपडेट सही ढंग से करना चाहते हैं या आपको ब्रश के बारे में परवाह नहीं है, यह बिल्कुल कठिन नहीं होना चाहिए। ब्रश पर अच्छा ट्यूटोरियल यहां है: http://bl.ocks.org/mbostock/1667367

यहां तक ​​कि कहा गया है कि, एनवीडी 3 लगभग सभी अंतर्निहित चार्ट घटकों (स्केल, अक्ष, आदि) को उजागर करने के बारे में बहुत अच्छा है, जिसका अर्थ है कि आप एक्सेस, जोड़ और अपडेट कर सकते हैं आवश्यकतानुसार ब्रश करें और फिर ब्रश ईवेंट के लिए पंजीकरण करें, क्रॉसफ़िल्टर अपडेट करें, और उसके बाद चार्ट को आवश्यकतानुसार दोबारा हटा दें।

यह भी खुला स्रोत है, इसलिए आपका दूसरा विकल्प रेपो को फोर्क करना होगा और ब्रश समर्थन और घटनाओं को सीधे स्रोत में जोड़ना होगा।

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

किसी भी तरह से, एक दिलचस्प चुनौती की तरह लगता है। शुभ लाभ!