d3.js राज्यों को बचाने

Question

मैं D3.js का उपयोग एक इंटरैक्टिव और गतिशील तरीके से कुछ डेटासेट को देखने के लिए करता हूं। उपयोगकर्ता सभी ग्राफों का पता लगा सकते हैं और अतिरिक्त डेटा और विचारों को जोड़कर डेटा पर व्यक्तिगत विचारों को पुनर्प्राप्त कर सकते हैं। मैं चाहता हूं कि उपयोगकर्ता mail, facebook आदि के माध्यम से डेटा में पाए गए अपने खजाने को साझा करने में सक्षम हों, लेकिन एक नए तरीके से, साझा किए गए "स्नैपशॉट" पर जाकर नए उपयोगकर्ता डेटा की खोज कर सकते हैं। इसलिए मैं जरूरत

1. मेरी गतिशील वेब पेज की वर्तमान स्थिति के बने रहने की
2. लोड और इस राज्य तेजी प्रदर्शित करने के लिए सक्षम हो।
3. बाँध सभी घटनाओं उस क्षण में बंधी हुई रही उपयोगकर्ता स्नैपशॉट

संभव उदाहरण के रूप में सरल एक के रूप में (वहाँ विभिन्न रेखांकन और घटनाओं के बहुत सारे होने जा रहे हैं), एक सरल d3 होने की कल्पना linegraph और

graph.selectAll("path").on('mouseover', function(d){ 
    $.get("ajaxFunction",{"d" : d} ,function(jsonData) { 
     //INIT NEW SVG 
    }); 
}); 

यह नया गतिशील लोड किए गए पृष्ठ यानी कई svg रों में शामिल है। लेकिन अगर मैं बस प्रत्येक एसवीजी के आकार और स्थिति को बचाता हूं, तो सभी मौजूदा घटनाओं को ट्रैक करना मुश्किल हो सकता है। और यदि मैं पूर्व उपयोगकर्ता द्वारा किए गए हर क्रिया को सहेजता हूं, तो मैं स्नैपशॉट को कुशलतापूर्वक कैसे लोड कर सकता हूं?

Answer 1

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

नोड्स की स्थिति प्राप्त करने के लिए d3js में कुछ और ज्ञान की आवश्यकता होगी।

आप किस प्रकार का डेटा प्रदर्शित कर रहे हैं? आपको शायद अपने जेएस में इवेंट रजिस्टर जोड़ने और निष्पादित सभी घटनाओं को रिकॉर्ड करने के लिए संभव होना चाहिए। घटना कॉलर्स गड़बड़ाना।

उदाहरण के लिए

कहते हैं कि मैं निम्न डेटा

{"Things":{ 
     "Balls":{ 
     "Footballs":"", 
     "Basketballs":"" 
     }, 
    "Persons":{ 
     "Painter":{ 
      "Pablo":"","Robert":"" 
     }, 
     "Programmers":{ 
     "Robert":""}}} 

आप और माउस क्लिक पर दिखाने के लिए/इस पेड़ के छिपाने नोड्स चाहते चाहिए।

आप somthing इस

var eventlog = []; 
$(".nodes").onClick(function(this){ 
    if (isClosed(this)){ 
    function_to_open_node(); 
    eventlog.append({"action" : "open", "id" : this.id}) 
    }else{ 
    function_to_close_node(); 
    eventlog.append({"action" : "close", "id" : this.id}) 
    } 
}) 

की तरह इस तरह आप इस

[{"action" : "close", "id" : "id"},{"action" : "close", "id" : "someotherid"},{"action" : "close", "id" : "someid"}] 

इस प्रकार आप एक संग्रहणीय राज्य है की तरह somthing के साथ खत्म करना चाहिए ऐसा करने में सक्षम होना चाहिए! इसे निष्पादित किया जा सकता है।