我写了一个脚本,用于以柱状图、标签和行之间的连接形式显示一些面向行的数据。随着数据集的增长,生成的SVG元素已经超出了屏幕的大小。为了使结果仅占用一个屏幕(主要是为了使d3缩放行为更容易管理),我在绘制之前缩放了SVG元素,使其适合于屏幕大小。我通过向SVG元素附加transform/scale属性来实现这一点。
问题在于,d3的behavior.zoom不知道这个缩放的变化,因此当我开始缩放时,它首先将缩放重置为1。有没有办法在d3的behavior.zoom中更改初始缩放比例?
编辑:添加了一个解决方法
在redraw()函数中,通过将d3.event.scale乘以初始缩放比例来解决了这个问题。因此,SVG元素的初始声明为:
问题在于,d3的behavior.zoom不知道这个缩放的变化,因此当我开始缩放时,它首先将缩放重置为1。有没有办法在d3的behavior.zoom中更改初始缩放比例?
编辑:添加了一个解决方法
在redraw()函数中,通过将d3.event.scale乘以初始缩放比例来解决了这个问题。因此,SVG元素的初始声明为:
var SVG = d3.select('#timeline')
.append('svg:svg')
.attr('class','chart')
.attr('transform','scale('+bscale+')')
.attr('width', wwidth)
.attr('height', wheight)
.call(d3.behavior.zoom()
.extent([[0,Infinity],[0,Infinity],[0,Infinity]])
.on('zoom', redraw));
并且
function redraw() {
SVG.attr("transform",
"translate(" + d3.event.translate + ")"
+ "scale(" + d3.event.scale * bscale + ")");
};