问题描述
我正在用d3.js做一些关于缩放的测试。目前,我已在测试中成功实现了几何缩放,但它有一个缺点:缩放 g
下的元素正在缩放。据我了解,这可以通过使用来解决。
I'm doing some tests with d3.js regarding zooming. At the moment, I have successfully implemented geometric zoom in my test, but it has a drawback: the elements under the zoomed g
are being scaled. As I understood it, this could be solved by using semantic zooming.
问题是我在测试中需要 scale
,因为我正在将它与jQuery.UI同步滑块值
。
The problem is that I need scale
in my test, as I'm syncing it with a jQuery.UI slider value
.
另一方面,我想要文本
调整元素大小以在缩放操作后保持其大小。
On the other hand, I would like the text
elements being resized to maintain their size after a zoom operation.
我有一个当前尝试的示例。
I have an example of my current attempt here.
我无法更改代码以适应此目的。任何人都可以分享一些见解/想法吗?
I'm having trouble changing my code to fit this purpose. Can any one share some insight/ideas?
推荐答案
对于你的解决方案,我合并了两个例子:
For your solution I have merged 2 examples:
- Semantic Zooming
- Programmatic Zooming
代码段:
function zoom() {
text.attr("transform", transform);
var scale = zoombehavior.scale();
//to make the scale rounded to 2 decimal digits
scale = Math.round(scale * 100) / 100;
//setting the slider to the new value
$("#slider").slider( "option", "value", scale );
//setting the slider text to the new value
$("#scale").val(scale);
}
//note here we are not handling the scale as its Semantic Zoom
function transform(d) {
//translate string
return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
}
function interpolateZoom(translate, scale) {
zoombehavior
.scale(scale)//we are setting this zoom only for detecting the scale for slider..we are not zoooming using scale.
.translate(translate);
zoom();
}
var slider = $(function() {
$("#slider").slider({
value: zoombehavior.scaleExtent()[0],//setting the value
min: zoombehavior.scaleExtent()[0],//setting the min value
max: zoombehavior.scaleExtent()[1],//settinng the ax value
step: 0.01,
slide: function(event, ui) {
var newValue = ui.value;
var center = [centerX, centerY],
extent = zoombehavior.scaleExtent(),
translate = zoombehavior.translate(),
l = [],
view = {
x: translate[0],
y: translate[1],
k: zoombehavior.scale()
};
//translate w.r.t the center
translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
view.k = newValue;//the scale as per the slider
//the translate after the scale(so we are multiplying the translate)
l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];
view.x += center[0] - l[0];
view.y += center[1] - l[1];
interpolateZoom([view.x, view.y], view.k);
}
});
});
我正在缩放w.r.t. 250,250这是剪辑圈的中心。
I am zooming w.r.t. 250,250 which is the center of the clip circle.
工作代码(已添加必要的评论)
Working code here (have added necessary comments)
希望这有帮助!
这篇关于d3.js将缩放行为更改为语义缩放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!