javascript - The D3.js graph freezes when sending another XMLHTTPRequest to the servlet -
मुझे D3.js में उत्पन्न नोड्स के साथ एक समस्या है। मेरे पास
HTML फ़ाइल है जहां फोर्स निर्देशित ग्राफ़ देखा जाता है, और एक सरल
जावा सर्वलेट प्राप्त करने के लिए
प्राप्त करें ब्राउज़र से अनुरोध के माध्यम से
XMLHttpPrequest । जब मैं पाठ क्षेत्र में कुछ भी सम्मिलित करता हूं और
HTML पृष्ठ पर "ढूंढें" बटन पर क्लिक करता हूं, तो मैं Servlet को एक
XMLHttpRequest भेजता हूं और एक एकल डेटा को एक के रूप में दर्शाता हूं नोड में
D3.js । यह ठीक से काम कर रहा है जब मैं पाठ क्षेत्र में एक ही पाठ या किसी अन्य पाठ के साथ "ढूंढें" बटन पर फिर से क्लिक करता हूं, तो उत्पन्न नोड अब और नहीं हिलता है। यहां मेरा कोड है:
HTML कोड:
& lt; html & gt; & Lt; शीर्ष & gt; & Lt; मेटा http-equiv = "सामग्री-प्रकार" सामग्री = "पाठ / html; वर्णसेट = यूटीएफ -8" & gt; & LT; शैली & gt; .node {स्ट्रोक: #fff; स्ट्रोक-चौड़ाई: 1.5px; } .link {stroke: # 999; स्ट्रोक-अस्पष्टता: .6; } & Lt; / style & gt; & Lt; title & gt; शीर्षक यहां सम्मिलित करें & lt; / title & gt; & Lt; / head & gt; & LT; बॉडी & gt; & lt; इनपुट प्रकार = "टेक्स्ट" id = "ढूंढें" आकार = "20" / & gt; & lt; बटन प्रकार = "बटन" onclick = 'find ();' & gt; ट्यूटोरियल ढूंढें & lt; / बटन & gt; & lt; / br & gt; & lt; स्क्रिप्ट src = "http://d3js.org/d3.v3.js" & gt; & lt; / स्क्रिप्ट & gt; & lt; स्क्रिप्ट भाषा = "जावास्क्रिप्ट" प्रकार = "टेक्स्ट / जावास्क्रिप्ट" & gt; & lt; / स्क्रिप्ट & gt; & LT; स्क्रिप्ट & gt; var xmlHTTPRequest = नया XMLHttpRequest (); var obj; var सरणी = नया अर्रे (); Var रंग = d3.scale.category20 (); var चौड़ाई = 960, ऊंचाई = 500; Var svg = d3.select ("body")। संलग्न ("svg") .attr ("width", width) .attr ("height", height); Var बल = डी 3। लेआउट। बल ()। प्रभार (-120) .लिंकआवेदन (30)। आकार ([चौड़ाई, ऊंचाई]); फ़ंक्शन प्रक्रिया () (यदि (xmlHTTPRequest.readyState == 4 & amp; xmlHTTPRequest.status == 200) {obj = JSON.parse (xmlHTTPRequest.responseText); array.push (obj); इस में(); }} फ़ंक्शन init () {बल .नोड (सरणी)। स्टार्ट (); var नोड = svg.selectAll ("। नोड") .डेटा (सरणी) .ेंद्र () .एंडेंड ("सर्कल") .attr ("class", "node") .attr ("r", 5)। शैली ("भरना", फ़ंक्शन (डी) {रिटर्न 1;}) .कॉल (बल। ड्रग); नोड.एपेंड ("शीर्षक") .टेक्स्ट (फ़ंक्शन (डी) {रिटर्न डी.नाम;}); बल। पर ("टिक", फ़ंक्शन () {नोड। एटट्र ("सीएक्स", फ़ंक्शन (डी) {रिटर्न डीएक्स;}) .attr ("cy", फ़ंक्शन (डी) {रिटर्न डीआई;})}} ; } फ़ंक्शन खोज () {xmlHTTPRequest.open ("GET", "/ नमूनासर्वलेट / माइस्वाल्ट? खोज =" + document.getElementById ("findAuthor")। मान, सत्य); XmlHTTPRequest.onreadystatechange = प्रक्रिया; xmlHTTPRequest.send (शून्य); } & Lt; / script & gt; & Lt; / body & gt; & Lt; / html & gt; यह जावा सर्वलेट है:
संरक्षित शून्य doGet (एचटीटीपीएर्वलेट अनुरोध अनुरोध, एचटीटीपी सर्वर रिस्पांस प्रतिक्रिया) सर्विसलेट अपेशन, IOException फेंकता है {// TODO स्वतः जनरेट किया गया विधि स्टब स्ट्रिंग खोजअधिकृत = request.getParameter ("ढूंढें"); अगर (findAuthor! = नल) {response.setContentType ("text / html"); response.getWriter () लिखना (generateJSON (लगता है))। }} सार्वजनिक स्ट्रिंग उत्पन्न JSON (स्ट्रिंग विषयनाम) JsonGenerationException फेंकता है, JsonMappingException, IOException {JSONSerialisation json = नया JSONSerialisation (); स्ट्रिंगबफर रिटर्नडेटा = नल; यदि (topicName.equals ("java")) {स्ट्रिंग str = "java"; स्ट्रिंग पर्सेड स्ट्रिंग = json.getString (str.toString ()); वापसीडेटा = नया स्ट्रिंगबफर ("{\" name \ ":"); returnData.append (parsedString); returnData.append ( "}"); } वापसी वापसी Data.toString (); } क्या कोई भी मुझे हल करने में सहायता करता है और उस कारण का पता लगाता है कि यह नोड एक और XMLHttpRequest भेजने के दौरान क्यों नहीं चल रहा है अग्रिम धन्यवाद आपकी सहायता के लिए।
ऐसा इसलिए है क्योंकि आपने अपने XMLHttpRequest को एक वैश्विक ऑब्जेक्ट बनाया है और इसे var : <पूर्व> & lt; स्क्रिप्ट & gt; var xmlHTTPRequest = नया XMLHttpRequest ();
इसके बजाय, या तो फ़ंक्शन के अंदर एक नया XMLHttpRequest बनाएँ जो कि अजाक्स कॉल करता है, और स्पष्ट रूप से var का उपयोग नहीं करते हैं मुझे लगता है कि इसे भी बनाने के लिए पठनीयता के लिए भी चर नाम दिखाना बहुत कंसट्रक्टर जैसा है जिसे आप इसे बनाने के लिए कहते हैं:
function find () {req = new XMLHttpRequest (); ... या (बेहतर विकल्प) एक फ्रेमवर्क का उपयोग करें, जैसे कि XMLHttpRequest का उपयोग करने के बजाय अपनी अजाक्स कॉल्स सीधे करें। यह कई कारणों से बेहतर विकल्प है, जिसमें आपको ब्राउज़र संगतता की जांच करना चाहिए और विभिन्न ब्राउज़रों के लिए विभिन्न तरीकों का उपयोग करना चाहिए, जैसे:
यदि (window.XMLHttpRequest) {req = new XMLHttpRequest () ; } और अगर (window.ActiveXObject) {req = नया ActiveXObject ("Microsoft.XMLHTTP"); } एक ढांचा आपके लिए यह सामान करेगा।
Comments
Post a Comment