我有一个svg生成的力布局图,我需要将它导出到当前(用户选择的)完整缩放的png。
根据我的推理,这将增加SVG的宽度和高度,所以如果svg是1920x1080,并且是“放大”的,则导出的svg可能有更大的宽度和高度来适应这种情况。
我已经尝试了所有的东西,而且我遗漏了一些东西,我只是不能动态地为我所需要的输出计算出正确的值。
这是我导出的示例 SVG,请注意有更多的信息,只是在这个比例上是不可见的。
编辑
下面是我的基本导出代码,大部分是从高级图表改编而来的:
serializeSvg: function() {
/**
* serialize a xml object to string
* @param {type} xmlNode the node to use
* @returns {String|@exp;xmlNode@pro;xml|@exp;window@pro;XMLSerializer@call;@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');发布于 2013-04-02 12:08:17
我还没有测试过这一点,但我认为当您导出到图像时,首先需要将其放大到起始水平。然后序列化XMLNode。然后根据用户的缩放级别增加大小,就像您现在所做的一样。然后还回去。
您应该能够最初使用以下方法获取用户的转换:
zoom.scale() 如果未指定,则返回当前缩放比例,默认为1。 zoom.translate() 如果未指定,则返回当前转换向量,默认为0,0。
https://stackoverflow.com/questions/15523906
复制相似问题