使用d3.behavior.drag()和transform时出现“卡顿”拖动
我尝试使用D3.js的d3.behavior.drag() drag事件来更新我的数据模型(不立即设置元素位置)，然后运行我的"draw“函数来更新基于更新后的模型的所有元素。此外，我在包含的group元素上使用了translate transform，以便移动与拖动的对象相关的所有元素(我从下面链接的示例中删除了多余的元素)。这会导致拖拽的元素在拖拽时卡顿，拖拽速度越快，情况会变得越糟。
参见this stripped-down example on jsFiddle。
以下是示例的代码：
blocks = [
{ x: 0, y: 0 }
];
drag = d3.behavior.drag()
.origin(Object)
.on("drag", 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");
g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });
gEnter.append("rect")
.attr("height", 100)
.attr("width", 100)
.call(drag);
}
draw();回答 3
Stack Overflow用户
发布于 2012-10-26 09:47:42
您正在对rect元素调用drag，但是您正在转换它的父元素：g元素。
问题是拖动组件使用相对于父组件的鼠标位置来确定新的d3.event.x和d3.event.y。因此，如果在用户拖动时移动(即transform)父对象，事情就会变得一团糟。
解决方案是在您移动的同一个元素上调用drag；在本例中是g元素：
function draw() {
g = svg.selectAll("g")
.data(blocks);
gEnter = g.enter().append("g")
.call(drag);
g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });
gEnter.append("rect")
.attr("height", 100)
.attr("width", 100);
}请参阅已更正的提琴：http://jsfiddle.net/EMNGq/14/
Stack Overflow用户
发布于 2013-05-25 07:11:57
我和达尔文也有同样的问题。拖动处理程序位于附加了D3数据但需要将变换应用于父组(而不是d3)的子对象上。
我通过将原始函数设置为返回x:0，y:0，然后在事件中使用x值而不是dx来解决这个问题。
e.g
var drag = d3.behavior.drag()
.origin(function(d,i) { return {x:0, y:0}; })
.on("drag", function (d) { movePosition(d3.event.x); });Stack Overflow用户
发布于 2013-02-06 04:16:41
Nautat为您的案例提供了很好的解决方案。
我的情况稍微复杂一些。我的数据绑定在我想要转换的g-node之下。在这种情况下，我不能简单地将.call(拖动)移动到g级。
我提交了一个拉取请求，以使基本坐标空间可自定义：https://github.com/mbostock/d3/pull/1055
https://stackoverflow.com/questions/13078535
复制相似问题