本文介绍了D3缩放平移的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遇到了D3拖拽行为的stutter。
I'm experiencing 'stutter' with the D3 drag behavior.
似乎是一个类似的问题,
Here is an example of the issue: (try dragging the rectangle)http://jsfiddle.net/EMNGq/109/
blocks = [
{ x: 0, y: 0 }
];
var translate_var = [0,0];
zoom_var = d3.behavior.zoom()
.on("zoom", function(d) {
d.x = d3.event.x;
d.y = d3.event.y;
draw();
});
svg = d3.select("body")
.append("svg:svg")
.attr("width", 600)
.attr("height", 600);
function draw() {
g = svg.selectAll("g")
.data(blocks);
gEnter = g.enter().append("g")
.call(zoom_var);
g.attr("transform", function(d) { return "translate("+translate_var[0]+","+translate_var[1]+")"; });
gEnter.append("rect")
.attr("height", 100)
.attr("width", 100);
}
draw()
推荐答案
您放大或拖动元素,但然后翻译相同的元素。因为翻译是相对的,所以会导致这种情况。
You zoom in or drag the element, but then translate the same element. Because the translation is relative, it results in this stuttering.
如:
与:
您的解决方案与类似问题相反。在容器上调用缩放功能。
Your solution is inverse to the similar question. Call your zoom function on the container.
svg = d3.select("body")
.append("svg:svg")
.attr("width", 600)
.attr("height", 600)
.call(zoom_var);
这是。
您可能还对实际缩放感兴趣。为此,只需将 scale
添加到 transform
规则。以下是启用缩放功能的。
You might also be interested in the actual zoom. To do that simply add the scale
to your transform
rule. Here's the demo with zoom enabled.
这篇关于D3缩放平移的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!