Mpld3: ब्राउजर/एचटीएमएल फिगर साइज के बजाय फिगर साइज निर्दिष्ट करता है * dpi

मुझे पूरा यकीन नहीं है कि आप क्या पूछ रहे हैं ... हम मैटप्लोटलिब आकृति से इंच में आकृति का आकार प्राप्त करते हैं, और डीपीआई भी मैटप्लोटलिब आकृति से प्राप्त करते हैं। आप कैसे सुझाव दे रहे हैं कि हम इसे बदल दें? धन्यवाद

पायथन में सेट निरपेक्ष आकृति आकार का उपयोग करने के बजाय, मेरा मतलब कुछ इस तरह है:

<div id='parent' class='figsizeinfo'>
//mpld3 generated code
</div>

जहां figsizeinfo आकार का CSS विनिर्देश है, और mpld3 div को भरता है। (मेरे अनुभव में यह है कि कैसे flotjs काम करता है)

हम्म ... यह प्रश्न वेब सामग्री के साथ मेरी अनुभवहीनता को धोखा दे सकता है, लेकिन मैंने सोचा कि एसवीजी (जो mpld3 का उपयोग करता है) पूरी तरह से पिक्सेल-आधारित है, और इसे आसानी से बदला नहीं जा सकता है। क्या फ्लोटज एसवीजी, या किसी अन्य विनिर्देश का उपयोग करते हैं?

एसवीजी (स्केलेबल वेक्टर फॉर्मेट) ग्राफिक्स वेक्टर आधारित होते हैं, पिक्सेल आधारित नहीं।

यहाँ एक SVG छवि का एक उदाहरण दिया गया है जो कि वैनिला मैटप्लोटलिब के साथ उत्पन्न होती है जो विंडो के आकार के साथ मापी जाती है:

http://bleepshow.pithy.io/SVG_Example

(स्पष्ट रूप से आपके उदाहरण पर आधारित)

d3js, और सभी कैनवास ड्राइंग आंकड़े, जहां तक ​​​​मैं समझता हूं, वेक्टर हैं, इसलिए उन्हें ऐसा करने में सक्षम होना चाहिए।

ट्रिक, मैं कल्पना करता हूं, सेट करना है

figwidth = $(“#parent”).width //(jquery based, but you get the point )

इसके बजाय

figwidth = figsize[0] * dpi;

हां, मुझे पता है कि एसवीजी वेक्टर-आधारित है, लेकिन जब तक मैं गलत नहीं हूं, कैनवास का आकार, साथ ही मार्करों का आकार और स्क्रीन पर उनकी स्थिति को बिंदुओं में मापा जाता है। ऐसा लगता है कि एसवीजी कोड लिखना बेहद जटिल होगा जो मनमाने ढंग से खिड़की के आकार के साथ मनमाने ढंग से आंकड़े के लिए सही ढंग से स्केल करेगा।

नहीं, यह काफी आसान है।

यहाँ हैक मैंने आपके fig_to_d3 कोड पर लागू किया है:

print mpld3.fig_to_d3(fig).replace("\n","\r").replace("var figwidth = 8.0 * 80","var figwidth = $(window).width()*.9;").replace("var figheight = 6.0 * 80","var figheight = $(window).height()*.9;")

जो इस प्रकार आता है:

http://bleepshow.pithy.io/mpld3_window_scale_test

अब, लेबल गलत जगह पर हैं, लेकिन फिर से यह "सिर्फ" उनकी स्थिति को div के संदर्भ में संदर्भित करता है और पूरी तरह से आंकड़े के लिए नहीं। लेकिन जहाँ तक मैं बता सकता हूँ चित्र का प्रतिपादन अच्छी तरह से काम करता है।

(ध्यान दें कि जब तक आप रीफ़्रेश नहीं करते हैं, तब तक इसका आकार नहीं बदलता है, लेकिन थोड़ा गोंद के साथ जो सीधे आगे भी होता है)

मैं वर्तमान में अपने लिए इस पर आधारित समाधान को जेरी-हेराफेरी कर रहा हूं, मुझे पुल-अनुरोध के लिए इसे कुछ सभ्य बनाने की कोशिश करने और पॉलिश करने में खुशी हो रही है।

mpld3 आकृति का उत्तरदायी आकार वास्तव में उपयोगी होगा। यदि आप इसे एक बटन (टूलबार में) के साथ जोड़ते हैं तो वर्तमान आकृति को एक नई विंडो में खोलने में सक्षम होने के लिए और संपूर्ण आकृति आसानी से आकार बदलने योग्य होगी।

+1

@ हदीम मैं इसे "पायथनिक" रखना चाहता हूं, तो कुछ ऐसा

mpld3.fig_to_d3(fig,size="adaptive")

एक अच्छा ट्रिगर होगा

मैं सहमत हूँ !

मैं समझता हूं कि आकृति को एक अलग आकार बनाना आसान है। लेकिन कुल मिलाकर मैं अभी भी आश्वस्त नहीं हूं कि यह एक अच्छा विचार है। एक बार फिगर का आकार संशोधित हो जाने पर, इसमें सभी लाइन चौड़ाई, मार्कर स्थान, मार्कर आकार, फ़ॉन्ट आकार इत्यादि को हैक करना शामिल होगा जो बिना किसी लाभ के कोड में बहुत सारी जटिलताएं जोड़ देगा। इसके अलावा, लेजेंड, अक्ष लेबल और अन्य गुणों का सही स्थान plt.draw() कमांड पर निर्भर करता है, जो आंतरिक आकृति आकार और डीपीआई सेटिंग्स के आधार पर धारणा बनाता है, और मुझे ईमानदारी से पता नहीं है कि इसे आसानी से कैसे बदला जा सकता है - तथ्य के बाद समायोजित।

इस mpld3 का दर्शन सरल आउटपुट का उत्पादन करना है जो जितना संभव हो उतना बारीकी से प्रतिबिंबित करता है जो matplotlib आंकड़ों में है। यदि आप आउटपुट फिगर का आकार बदलना चाहते हैं, तो पसंदीदा तरीका यह होगा कि आप matplotlib फिगर साइज को एडजस्ट करें। कुछ और ऐसा लगता है जैसे इसे लागू करने, परीक्षण करने और बनाए रखने के लिए यह जल्दी से एक प्रमुख सिरदर्द बन जाएगा।

एक प्लगइन के बारे में क्या?

plugins.connect(fig, plugins.ResponsiveSize())

एक प्लगइन शायद ऐसा करने का एक अच्छा तरीका होगा। लेकिन फिर, आप फ़ॉन्ट आकार, रेखा की चौड़ाई, मार्कर आकार, किंवदंती स्थान और अक्ष पाठ स्थानों को अनुकूलित करने से कैसे निपटते हैं? उन सभी मुद्दों के कारण, आकार बदलने का समर्थन करने के लिए कुछ व्यापक बुनियादी ढांचे के बिना, मुझे लगता है कि इस तरह के प्लगइन में उपयोगिता की एक सीमित सीमा होगी।

@jakevdp मैं असहमत हूं: उपरोक्त मेरे 3 सेकंड हैक में केवल एक चीज का सामना करना पड़ा लेबल स्थान थे, और फिर, यह बेहतर जावास्क्रिप्ट लिखने का मामला है। डीओएम बिना अधिक काम के पूर्ण स्थिति और सापेक्ष स्थिति की अनुमति देता है।

जिस तरह से अब कोड लागू किया गया है, सब कुछ आकृति में कठिन कोडित है। थोड़े से काम के साथ, चौड़ाई/ऊंचाई, रेखा मोटाई, और फ़ॉन्ट आकार को div आकार के विरुद्ध रैखिक रूप से बढ़ाया जा सकता है। सबसे मुश्किल हिस्सा पहलू अनुपात होगा, और इसे लॉक किया जा सकता है। एक बार पहलू अनुपात लॉक हो जाने पर, रैखिक रूप से सब कुछ स्केल करना काफी सरल है

@ हदीम यह एक अच्छा विचार है।

मैं d3.js नहीं जानता, इसलिए मुझे कोई जानकारी नहीं है। लेकिन क्योंकि हम svg फ़ाइल पर काम कर रहे हैं, मैं वास्तव में कल्पना नहीं करता कि हम इसे आसानी से नहीं कर सकते हैं ...

इसे बनाने के सर्वोत्तम तरीके के बारे में सोचना शुरू करने के लिए कुछ लिंक:

• http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/
• http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive
• http://www.triballabs.net/2013/02/the-basics-of-responsive-d3-charts/

@dansteingart के लिए +1। सभी एसवीजी आंतरिक लंबाई और स्थिति को सापेक्ष निर्देशांक में सेट क्यों न करें और फिर आउटपुट से पहले पूरे आंकड़े का आकार बदलने के लिए व्यूबॉक्स का उपयोग करें और इसलिए अंजीर के साथ मिलान करें matplotlib पैरामीटर (या अन्य मामले में उत्तरदायी हो)।

@dansteingart - मैं मानता हूं कि पर्याप्त JS हैक्स के साथ, आप इसे काम कर सकते हैं। लेकिन परवाह किए बिना, मैं उस सुविधा को शामिल करने के लिए इस पैकेज को मौलिक रूप से संशोधित करने के समर्थन में नहीं हूं।

क्यों? खैर, एक बात यह है कि यह पैकेज के पूर्वोक्त दर्शन के खिलाफ जाता है, जो कि प्लॉट तत्वों, आकृति के आकार आदि को matplotlib इंटरफ़ेस के माध्यम से परिभाषित किया जाना चाहिए।

दूसरा यह है कि यह "जरूरी" सुविधा नहीं है, और इस तरह की गैर-जरूरी सुविधा के लिए कोड आधार को और अधिक जटिल बनाना पैकेज को लंबे समय तक नुकसान पहुंचाएगा। ऐसा क्यों हो सकता है, इस पर कुछ पृष्ठभूमि के लिए, पिछले साल SciPy पर @ellisonbg की बातचीत देखें।

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

मैं बस इस पर पकड़ा जा रहा हूं, और मुझे लगता है कि किसी प्रकार की प्लगइन किसी प्रकार की दिलचस्प उत्तरदायी आकृति आकार बदलने के व्यवहार को पूरा कर सकती है। @dansteingart ने इस धागे को एक फीचर के लिए एक विचार के साथ शुरू किया, और इस बारे में एक सवाल कि क्या यह एक निश्चित तरीके से सुविधा को लागू करने के लायक था। प्रश्न के उत्तर में, मेरा सुझाव है कि आप एक प्लगइन से शुरू करें और देखें कि यह _objects.py या _js.py को बदले बिना कितनी दूर जा सकता है। लेकिन अगर आप इसके लिए तैयार हैं, तो मैं एक कदम पीछे हटना चाहता हूं और इस बारे में बात करना चाहता हूं कि हम किस समस्या को हल करने का प्रयास कर रहे हैं:

यह बहुत अच्छा है कि आकृति का सेट आकार स्क्रीन पर दिखाई देता है, लेकिन मुझे लगता है कि कैनवास आकार को बाउंडिंग div पर सेट करने का विकल्प रखने के लिए यह "अधिक प्रतिक्रियाशील" होगा, और फिर उस div आकार को ब्राउज़र चौड़ाई/जो कुछ भी निर्धारित किया जा सकता है अन्यथा डेवलपर चाहता है।

मुझे उस उपयोग के मामले के बारे में कुछ स्पष्टीकरण चाहिए जहां यह आने वाला है। अपने नियमित कार्यप्रवाह में, मैं अपने वेब ब्राउज़र को अधिकतम करने के साथ क्लाउड में चलने वाले नोटबुक सर्वर के साथ ipython का उपयोग करता हूं। तो यह मेरे लिए आ सकता है अगर मैं अपने काम के प्रदर्शन से अपने लैपटॉप डिस्प्ले पर स्विच करता हूं और स्क्रीन की चौड़ाई कम होती है। लेकिन मुझे यकीन है कि अन्य सेटिंग्स भी हैं जिनके बारे में अन्य लोग सोच रहे हैं। और क्या?

@jakevdp काफी मेला है, और मैं मानता हूं कि अजगर की तरफ _at all_ कुछ भी नहीं बदला जाना चाहिए। हालांकि, मुझे लगता है कि जेएस पक्ष पर यह सब उचित खेल है, और यदि प्रयोग का बिंदु matplotlib और d3js के सर्वोत्तम पहलुओं से शादी करना है, तो मुझे लगता है कि यह आगे बढ़ने के लायक है।

जिस तरह से मैं इसे देखता हूं, एक बार जब आप fig_to_d3 पर कॉल करते हैं, तो आप अजगर भूमि से बाहर हो जाते हैं, और आकृति को उत्तरदायी बना रहे हैं = बेहतर जेएस लिख रहे हैं।

उत्तरदायी पृष्ठों की उपयोगिता के लिए, अकेले iPython आउटपुट के लिए, मैं आपसे सहमत हूं, लेकिन Python iPython नोटबुक से अधिक है, और मुझे लगता है, अंततः, mpl3d का उपयोग आकार के उत्तरदायी वेब पेज बनाने के लिए आपके द्वारा यहां बताए गए से अधिक उपयोगी होगा।

आपके तर्क के अनुसार, अगर मैं matplotlib को ध्यान में रखते हुए विस्तार से ज़ूम इन करना चाहता हूं, तो मुझे बस xlim/ylim.

फिर से महान पैकेज के लिए धन्यवाद, मैं देखूंगा कि मैं एक प्लगइन के साथ क्या नहीं कर सकता और आपके पास वापस आऊंगा।

@aflaxman

मुझे उस उपयोग के मामले के बारे में कुछ स्पष्टीकरण चाहिए जहां यह आने वाला है। अपने नियमित कार्यप्रवाह में, मैं अपने वेब ब्राउज़र को अधिकतम करने के साथ क्लाउड में चलने वाले नोटबुक सर्वर के साथ ipython का उपयोग करता हूं। तो यह मेरे लिए आ सकता है अगर मैं अपने काम के प्रदर्शन से अपने लैपटॉप डिस्प्ले पर स्विच करता हूं और स्क्रीन की चौड़ाई कम होती है। लेकिन मुझे यकीन है कि अन्य सेटिंग्स भी हैं जिनके बारे में अन्य लोग सोच रहे हैं। और क्या?

देखें http://pithy.io

मैंने मुझे/मेरे समूह/मेरी कक्षाओं को स्क्रिप्ट लिखने की अनुमति देने के लिए लिखा था जो फिर वेब ऐप्स में बदल जाती हैं। फिगर फिट होने से खिड़की जीवन को बहुत अच्छा बनाती है। MPL3d मुझे इंटरएक्टिव प्लॉट करने के लिए बहुत अच्छे टूल देता है (मैं हैकिंग फ़्लोट चारों ओर कर रहा था), और यदि इंटरेक्टिव प्लॉट आकार उत्तरदायी हैं, तो यह सब जीत है।

धन्यवाद @dansteingart। ध्यान रखें कि भले ही JS Python उपयोगकर्ता से छिपा हुआ हो, फिर भी यह कोड है और इसे अभी भी बनाए रखने की आवश्यकता है। ओपन सोर्स डेवलपमेंट के साथ वर्षों में मेरा अनुभव यह है कि लोग अक्सर साथ आते हैं जो नई सुविधाओं को लागू करने के लिए उत्साहित होते हैं, और एक बार उन सुविधाओं का विलय हो जाने के बाद, उनका रखरखाव और रखरखाव उन कुछ देवों के कंधों पर आ जाता है जिन्होंने पैकेज में निवेश किया है। दीर्घावधि। मैं पहले से ही उस बिंदु पर अत्यधिक प्रतिबद्ध हूं जहां मुझे कुछ साल पहले बनाए गए अच्छी तरह से उपयोग किए गए पैकेजों पर बग रिपोर्ट को अनदेखा करने के लिए मजबूर होना पड़ा। मैं वास्तव में नहीं चाहता कि mpld3 उस बिंदु तक पहुंचे।

समझने के लिए धन्यवाद, और मैं यह देखने के लिए उत्सुक हूं कि आप एक प्लगइन में क्या एक साथ रख सकते हैं।

@jakevdp उस बिंदु को अच्छी तरह से लिया गया है, और मुझे लगता है कि प्लगइन आर्किटेक्चर उस अंत तक अच्छी तरह से काम करता है। यदि यह टूट जाता है तो यह मेरी गलती होगी, आपकी नहीं (अर्थात, जब तक कि आप fig_to_d3 :-p नहीं बदलते)

पुनर्लेखन आ गया है, और यह कम से कम विशेष परिस्थितियों के लिए प्लगइन के रूप में लागू करने के लिए _slightly_ आसान हो सकता है। हालांकि, मैंने इसे इस तरह की गतिशील स्थिति को ध्यान में रखते हुए नहीं लिखा था, इसलिए कुछ नुकसान हो सकते हैं। अगर आप इस पर कोई प्रगति करते हैं तो मुझे बताएं।

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

मुझे लगता है कि यह एक योग्य विशेषता है, लेकिन साजिश रचने के बाद संदर्भ के लिए आप d3 का उपयोग आकृति को ऑटोस्केल बनाने के लिए कर सकते हैं (यहां खिड़की की ऊंचाई के साथ)

fetch("d3/" + figure + ".json")
    .then((response) => response.json())
    .then((data) => mpld3.draw_figure(figure, data))
    .then(() => {
        d3.select("#" + figure)
            .selectAll(".mpld3-figure")
            .attr("width", "100%")
            .attr("height", "70vh")
            .attr("viewBox", "0 0 1200 800")
            .attr("preserveAspectRatio", "xMinYMin meet");
    });

यहां मैं viewBox का उपयोग करने के लिए @hadim और @carlinmack को दूसरा स्थान दूंगा। यह वास्तव में बहुत सरल हो सकता है। उदाहरण के लिए, यदि आपके पास वर्तमान में <svg width="1200" height="800"> है, तो इसके बजाय <svg viewBox="0 0 1200 800"> प्रयास करें। बस, इतना ही। viewBox svg के अंदर समन्वय प्रणाली को परिभाषित करता है, और width और height पैरामीटर वैकल्पिक हो जाते हैं और किसी भी अन्य तत्व की तरह बाहरी आयामों को परिभाषित करते हैं। आपके पास width=100% भी हो सकता है या सीधे सीएसएस के माध्यम से मूल्य निर्धारित किया जा सकता है (सीएसएस के रूप में चौड़ाई और ऊंचाई विशेषताओं पर प्राथमिकता है)।

मैंने हाल ही के क्रोम संस्करण के साथ इसका सफलतापूर्वक उपयोग किया। विवरण के लिए क्रॉस-ब्राउज़र निर्भरता की जांच की जानी चाहिए, लेकिन मुझे लगता है कि नीचे की रेखा स्पष्ट है।

पीएस: https://css-tricks.com/scale-svg पर एक पृष्ठभूमि आलेख है लेकिन मुझे यह भ्रमित लगता है जब ऊपर उल्लिखित विधि केवल काम करती है (कम से कम आधुनिक ब्राउज़रों में) और अवधारणात्मक रूप से सरल है: viewBox = "0 0 ${width} ${height}" आंतरिक कोड के लिए, width=... और height=... svg विशेषता के रूप में या यदि आवश्यक हो तो पुन: स्केलिंग के लिए सीएसएस पैरामीटर।

हाँ ठीक है, ठीक यही @carlinmack ने सुझाव दिया है। मैं "आकृति को ऑटोस्केल बनाने के लिए d3 का उपयोग करें" से भ्रमित था, क्योंकि यह शुद्ध HTML / CSS है, लेकिन ठीक है, DOM में हेरफेर करना d3 करता है। @carlinmack द्वारा इंगित "preserveAspectRatio" डिफ़ॉल्ट मान है जो मुझे विश्वास है (कम से कम यही css-tricks.com लिंक में समझाया गया है)। आप height="70vh" संकेत क्यों देंगे यदि पक्षानुपात वैसे भी संरक्षित है ? क्या यह बहुत संकीर्ण और लम्बे आंकड़ों के लिए किसी प्रकार की ऊपरी सीमा है?

सही, मैं नहीं चाहता था कि पोर्ट्रेट आंकड़े व्यूपोर्ट से अधिक हों :)

सिवाय इसके कि यह आंकड़े को आवश्यकता से बड़ा बना देता है, उपयुक्त नहीं है जब आसपास की सामग्री के साथ एक तंग फिट की आवश्यकता होती है। इसके बजाय max-height का उपयोग करना मेरे लिए काम करता है।

यहां बताया गया है कि मैं ब्राउज़र में mpld3 के आंकड़े कैसे लोड करता हूं:

      let figureID = "id_12345" ; 
      let dataURL = figureID + ".json" ; 

      d3.json(dataURL).then( function(data) {
        mpld3.draw_figure(figureID, data);
        return data;
      }).then( function(data) {
        d3.select("#" + figureID)
          .selectAll(".mpld3-figure")
          .attr("width", null)   // remove "width" and "height" attributes as set by mpld3
          .attr("height", null)  
          .attr("viewBox", `0 0 ${data.width} ${data.height}`)
      });

चर्चा के लिए धन्यवाद @carlinmack @perrette ! संयोग से हमने अभी भी इसका सामना किया, @ dkong-idm का समाधान था:

    const resizeChart = (viewBoxSettings) => {
        let svg = document.getElementsByClassName("mpld3-figure");

        if (svg && svg.length > 0) {
            svg[0].setAttribute("viewBox",viewBoxSettings );
            svg[0].setAttribute("width", "90vw");
            svg[0].setAttribute("height", "auto");
        }
    }

@vladh , क्या इस ऑटो-स्केलिंग कार्यक्षमता को जोड़ने के लिए बहुत काम होगा mpld3 , या तो वैकल्पिक तर्क के रूप में draw_figure या फिर एक स्टैंडअलोन फ़ंक्शन के रूप में?

@cliffckerr मैं निश्चित रूप से इसे draw_figure में जोड़ सकता हूं, शायद एक तर्क के रूप में जो Object लेता है और उस ऑब्जेक्ट में निर्दिष्ट सभी विशेषताओं को svg पर सेट करता है, ताकि आप पास कर सकें {viewBox: ..., width: '90vw', height: 'auto'} जैसी किसी चीज़ में।

मैं आपसे और इस थ्रेड के अन्य लोगों से पूछना चाहता हूं कि क्या आपको लगता है कि इसे कहीं और जोड़ा जाना चाहिए, जैसे fig_to_html() । अगर ऐसा है, तो शायद हमें इसका समाधान सोचना चाहिए। अन्यथा, मुझे बताएं और मैं तुरंत draw_figure() में परिवर्तन कर सकता हूं।

@vladh हां, यह fig_to_html() में भी बहुत उपयोगी होगा।