D3.js 缩放初始缩放级别
D3.js scale initial zoom level
我创建了一个 d3.js 强制布局,并希望根据屏幕分辨率设置初始缩放级别。
我已经在页面加载时使用 jQuery 和静态 scale 值实现了它,它工作正常但是当我放大时它直接缩放到默认比例。
代码如下:
var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().scaleExtent([0.2, 3]).on("zoom", redraw)).on("dblclick.zoom", null)
.append('svg:g');
$( document ).ready(function() {
scale = (0.24758571798325626);
translate = [width*40/100,height*37/100];
svg.transition()
.duration(750)
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
});
有没有办法在页面加载时设置默认缩放值,这样当我放大时它会正常缩放。
我尚未测试此解决方案,但我认为您需要在过渡结束时更新缩放行为的 scale/translate 属性:
var zoomBehavior = d3.behavior.zoom()
.scaleExtent([0.2, 3])
.on("zoom", redraw);
var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(zoomBehavior)
.append('svg:g');
$( document ).ready(function() {
scale = (0.24758571798325626);
translate = [width*40/100,height*37/100];
svg.transition()
.duration(750)
.attr("transform", "translate(" + translate + ")scale(" + scale + ")")
.each("end", function () {
zoomBehavior
.scale(scale)
.translate(translate);
});
});
我创建了一个 d3.js 强制布局,并希望根据屏幕分辨率设置初始缩放级别。 我已经在页面加载时使用 jQuery 和静态 scale 值实现了它,它工作正常但是当我放大时它直接缩放到默认比例。
代码如下:
var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().scaleExtent([0.2, 3]).on("zoom", redraw)).on("dblclick.zoom", null)
.append('svg:g');
$( document ).ready(function() {
scale = (0.24758571798325626);
translate = [width*40/100,height*37/100];
svg.transition()
.duration(750)
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
});
有没有办法在页面加载时设置默认缩放值,这样当我放大时它会正常缩放。
我尚未测试此解决方案,但我认为您需要在过渡结束时更新缩放行为的 scale/translate 属性:
var zoomBehavior = d3.behavior.zoom()
.scaleExtent([0.2, 3])
.on("zoom", redraw);
var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(zoomBehavior)
.append('svg:g');
$( document ).ready(function() {
scale = (0.24758571798325626);
translate = [width*40/100,height*37/100];
svg.transition()
.duration(750)
.attr("transform", "translate(" + translate + ")scale(" + scale + ")")
.each("end", function () {
zoomBehavior
.scale(scale)
.translate(translate);
});
});