d3.js

Question

के लिए पाइथन/फ्लास्क में डेटा असीमित रूप से लोड हो रहा है मेरे पास एक अजगर/फ्लास्क एप्लिकेशन है। इसमें मेरे पास एक पृष्ठ है जो पृष्ठ पर डेटा प्रदर्शित करने के लिए डेटाबेस से बहुत कुछ पूछता है। हालांकि, अगर मैं view.py में यह तर्क शामिल करता हूं जहां @ app.route() है, तो पृष्ठ लोड करना बहुत लंबा लगता है। मैं फिर इस डेटा को डी 3 के साथ प्रदर्शित कर रहा हूं।

मेरा वर्तमान सेटअप यह है कि मेरे पास दृश्य से अलग मार्ग है जो डेटा की गणना करता है (मान लें "/ डेटा" पथ है)। जब आप उस पथ पर जाते हैं, तो यह डेटा को जेसन प्रारूप में देता है और

d3.json("/data", callback) 

द्वारा लोड किया गया यह ठीक काम करता है। मेरी समस्या यह है कि मुझे कई अलग-अलग प्रश्न हैं जिन्हें पूरा करने की आवश्यकता है, और प्रत्येक डेटासेट के लिए एक अलग पथ होने से मेरा ऐप खराब हो रहा है और ऐसा लगता है कि यह DRY सिद्धांत का पालन नहीं कर रहा है। क्या ऐसा करने के लिए इससे अच्छा तरीका है? मुझे जावास्क्रिप्ट में वैरिएबल पास करने में भी कठिनाई हो रही है जो कि अजगर से डी 3 चलाती है।

Answer 1

आपको वास्तव में यहां क्या चाहिए, डेटा तक पहुंचने के लिए एक एपीआई है। यदि आप पहले से ही फ्लास्क का उपयोग कर रहे हैं तो Flask-Restful एक शानदार विकल्प है। आप इस प्रकार का मार्ग निर्धारित कर सकते हैं:

from flask import Flask 
from flask_restful import Resource, Api, reqparse 

app = Flask(__name__) 
api = Api(app) 

class Data(Resource): 
    def __init__(self): 
     self.parser = reqparse.RequestParser() 
     self.parser.add_argument('name', type=str, required = True) 
     self.parser.add_argument('whatever', type=str, required = True) 
    def post(self): 
     args = self.parser.parse_args() 
     #query your database here and do your stuff 
     print(args['name']) 
     print(args['whatever']) 
     return {'data': 'your data here', 
       'other_information': 'more_stuff' } 
api.add_resource(Data, '/data') 

if __name__ == '__main__': 
    app.run(debug=True) 

और फिर आप चर निर्दिष्ट करें कि क्या डेटा का उपयोग कर की जरूरत है पारित करने के लिए सक्षम हो जाएगा या तो JSON, क्वेरी स्ट्रिंग, या एक रूप। फ्लास्क-रेस्टफुल बहुत स्मार्ट है और वह विधि को समझ लेगा जिसका उपयोग आप इसे स्वचालित रूप से भेजने के लिए कर रहे हैं। फिर आप एक शब्दकोश वापस कर सकते हैं जिसे JSON का उपयोग करके एन्कोड किया जाएगा। यह जावास्क्रिप्ट पर कई चरों को पारित करने के आपके दूसरे मुद्दे को संबोधित करना चाहिए।

इसी जावास्क्रिप्ट का एक उदाहरण यहाँ है:

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "http://127.0.0.1:5000/data"); 
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); 
xhr.onload = function() { 
    var dict = JSON.parse(xhr.responseText); 
    console.log(dict['data']); 
    console.log(dict['other_information']); 
}; 

var request = JSON.stringify({'name':'my_name', 'whatever':'stuff'}); 
xhr.send(request);