12
मेरे पास d3 जेनरेटेड फोर्स लेआउट आरेख है, मुझे वर्तमान (उपयोगकर्ता-चयनित) स्केलिंग बरकरार रखने के साथ इसे png पर निर्यात करने की आवश्यकता है।बरकरार रखने के साथ पूर्ण एसवीजी दिखाएं
मेरे तर्क से यह तो, SVG चौड़ाई और ऊंचाई बढ़ेगा इसलिए यदि svg1920x1080 है और उस में 'जूम' है, निर्यात svg शायद एक बहुत बड़ा चौड़ाई और ऊंचाई इस समायोजित करने के लिए होना चाहिए।
मैंने सब कुछ करने की कोशिश की है, और मुझे कुछ याद आ रहा है, मैं बस आउटपुट के लिए सही मानों की गतिशील गणना की प्रतीत नहीं कर सकता।
यहाँ एक example मेरे निर्यात SVG की है, ध्यान दें कि एक बहुत अधिक जानकारी है, यह सिर्फ है कि बड़े पैमाने पर दिखाई नहीं देता है।
संपादित
यहाँ मेरी बुनियादी निर्यात कोड, ज्यादातर Highcharts से अनुकूलित है:
serializeSvg: function() {
/**
* serialize a xml object to string
* @param {type} xmlNode the node to use
* @returns {String|@exp;[email protected];xml|@exp;[email protected];[email protected];@call;serializeToString}
*/
function serializeXmlNode(xmlNode) {
if (typeof window.XMLSerializer !== 'undefined') {
return (new window.XMLSerializer()).serializeToString(xmlNode);
} else if (typeof xmlNode.xml !== 'undefined') {
return xmlNode.xml;
}
return '';
}
var svg = serializeXmlNode(document.getElementsByTagName('svg')[0]),
factor = 2;
svg = '<svg'
+ ' xmlns="http://www.w3.org/2000/svg"' // xml namespace
+ ' version="1.1"'
+ ' xmlns:xlink="http://www.w3.org/1999/xlink"' // for images
+ ' ' + svg.substring(svg.indexOf('<svg ') + 5);
// highcharts svg sanitizer
svg = svg.replace(/width="([^"]+)"/, function(m, width) {
return 'width="' + (width * factor) + '"';
}).replace(/height="([^"]+)"/, function(m, height) {
return 'height="' + (height * factor) + '"';
}).replace(/<rect class="drag"[^<]+<\/rect>/, '')
// IE specific
.replace(/<IMG /g, '<image ')
.replace(/height=([^" ]+)/g, 'height="$1"')
.replace(/width=([^" ]+)/g, 'width="$1"')
.replace(/id=([^" >]+)/g, 'id="$1"')
.replace(/class=([^" ]+)/g, 'class="$1"')
.replace(/ transform /g, ' ')
.replace(/:(path|rect)/g, '$1')
.replace(/style="([^"]+)"/g, function(s) {
return s.toLowerCase();
});
return svg;
}
और मुख्य ज़ूम/d3 लेआउट के लिए स्केलिंग स्टार्टअप:
var layout = d3.layout.force();
var DEFAULT_SIZE = 64;
var GROWTH_SCALE = 1.15;
var SHRINK_SCALE = 1.05;
// creates a new force layout
var force = layout
.size([w, h])
.gravity(.06)
.distance(110)
//.friction(0.6)
//.linkStrength(0.4)
.charge(-((DEFAULT_SIZE * GROWTH_SCALE) * 10))
.on('tick', tick);
// creates the svg context
var svg = d3.select('.la-container').append('svg:svg')
.attr('width', w)
.attr('height', h)
.attr('pointer-events', 'all') // set for the pan/zooming
.append('svg:g') // add a g element for capturing zoom and pan
.call(d3.behavior.zoom().scaleExtent([0.6, 6.0]).on('zoom', redraw))
.append('svg:g');
svg.append('svg:rect')
.attr('class', 'drag')
.attr('width', w)
.attr('height', h)
.attr('fill', 'white');
क्या आप अपनी छवि को स्केल करने के लिए डी 3 में ज़ूम व्यवहार का उपयोग कर रहे हैं? ज़ूम के स्तर को कैप्चर करने और आउटपुट एसवीजी को उचित रूप से बदलने के लिए आपको zoom.scale() का उपयोग करने में सक्षम होना चाहिए। अधिक जानकारी (और जावास्क्रिप्ट कोड) वास्तव में काम करने के लिए सहायक होगी जो आप करने की कोशिश कर रहे हैं? – RoryB
हां, मैं 'd3.behavior.zoom()' और 'd3.behavior.drag() 'का उपयोग कर रहा हूं, मान लीजिए कि उपयोगकर्ता एक ग्राफ नोड पर ज़ूम किया गया है जिसमें 500 नोड्स प्रत्येक 100 पिक्सेल अलग हैं, उन्हें खींचने की आवश्यकता होगी अन्य नोड्स देखने के लिए, अब मैं जो चाहता हूं वह यह है कि यदि वह ज़ूम इन करते समय निर्यात पर क्लिक करता है, तो पूर्ण 500 नोड ग्राफ को एक एसवीजी में निर्यात किया जाना चाहिए जहां पूरी ज़ूम उस ज़ूम स्तर पर दिखाई देगी – epoch
ज़ूम स्तर को कैप्चर करने में आपकी समस्या है या वास्तविक निर्यात प्रक्रिया के साथ? आपके द्वारा वास्तव में उपयोग किए जा रहे जावास्क्रिप्ट के कुछ विचारों के बिना आपकी सहायता करना मुश्किल होगा, और आपका वर्तमान कोड कौन सा त्रुटि संदेश आदि उत्पन्न कर रहा है। – RoryB