html - उच्च संकल्प प्रिंट गुणवत्ता फाइलों में d3.js ग्राफ आउटपुट?




photoshop adobe-illustrator (3)

प्रकाशन प्रिंट गुणवत्ता उच्च रिज़ॉल्यूशन के साथ अन्य डेटा प्रारूप में d3.js पर आधारित एचटीएमएल / जेएस में बनाए गए ग्राफ, चार्ट, मानचित्र इत्यादि को आउटपुट करने का कोई तरीका है?

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

आउटपुट प्रारूप जिन्हें मैं ढूंढ रहा हूं उसे इलस्ट्रेटर या फ़ोटोशॉप के लिए पठनीय होना चाहिए। और अधिकतर अधिमानतः निर्यात किए जाने के बाद अधिक दृश्य मैनिप्ल्यूशन की आवश्यकता होती है। अगर मैं प्रभाव प्राप्त करने के लिए रंग को फिर से भरना या फिर से भरना या रीफोटोशॉप करना चाहता हूं तो यह वास्तव में इस उद्देश्य को हरा देगा।

धन्यवाद!


अधिक जटिल तरीके हैं लेकिन एक त्वरित, आसान तरीका सिर्फ एसओएम तत्व को डीओएम से कॉपी करना है (आपको अपनी सीएसएस फाइलों को भी शामिल करने की आवश्यकता हो सकती है), इसे एक फ़ाइल में पेस्ट करें और इसे एक्सटेंशन .svg से सहेजें। उसके बाद आप इसे वेक्टर संपादक में खोल सकते हैं।

D3.js आउटपुट को एक png फ़ाइल में कनवर्ट करने के तरीके भी हैं। किसी ने इसे http://jsfiddle.net/plaliberte/HAXyd/ पर canvg साथ ऐसा करने के लिए एक jsfiddle डाल दिया।


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

चूंकि डाउनलोड करने के लिए कोई वास्तविक फ़ाइल नहीं है, आपको अपने svg स्ट्रिंग को डेटा-यूरी के रूप में एन्कोड करना है, आपको बस इतना करना है ...

var download = d3.select("body").append("a").attr("href", "#")

download.on("click", function(){
      d3.select(this)
        .attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select("#viz").html()))
        .attr("download", "viz.svg") 
    })

आप यहां एक डेमो देख सकते हैं http://bl.ocks.org/3831266 आप बिना किसी समस्या के इलस्ट्रेटर में डाउनलोड की गई फ़ाइल खोल सकते हैं।

हालांकि कुछ मिलचास हैं: आपको अपनी शैलियों की इनलाइन घोषित करनी होगी (आप बाहरी सीएसएस स्टाइलशीट के साथ शैली नहीं बना सकते हैं)।

एक त्वरित और गंदे समाधान एसवीजी कोड को अलर्ट बॉक्स में आउटपुट करना है:

download.on("click", function(){
  alert(d3.select("#viz").html())
});

और अलर्ट को एक टेक्स्ट फ़ाइल में कॉपी करें और svg के रूप में सहेजें।


यदि आप एक उच्च रिज़ॉल्यूशन रास्टर छवि को सहेजने में प्रसन्न हैं, तो मुझे फ़ायरफ़ॉक्स एडन, पर्ल क्रिसेंट पेज सेवर का उपयोग करने का सबसे अच्छा समाधान मिल गया है:

https://addons.mozilla.org/en-US/firefox/addon/pagesaver/

मूल संस्करण आपको छवि को स्केल करने का विकल्प देता है - उदाहरण के लिए 200% तक स्केलिंग .png के संकल्प को डबल (4x जितना पिक्सेल) में बढ़ाएगा जो आपको एक साधारण स्क्रीनशॉट के साथ मिलेगा।

यदि आपको वेक्टर की आवश्यकता है, और इलस्ट्रेटर में svg लोड करना आपके लिए काम नहीं कर रहा है, तो आप इलस्ट्रेटर के लाइव ट्रेस का उपयोग करके सुपर हाई रेज पीएनजी में प्रतिपादन करने का प्रयास कर सकते हैं ...