d3js拖动svg:g拖动前移动项目
我在这里学习了关于拖动项目组的教程 这就是我所拥有的d3js拖动svg:g拖动前移动项目,svg,d3.js,drag,Svg,D3.js,Drag,我在这里学习了关于拖动项目组的教程 这就是我所拥有的 但是,当我尝试拖动项目时,第一次拖动会将项目移离其当前坐标,但随后所有内容都会正常拖动。我不明白为什么第一次拖动时会出现奇怪的行为。问题是,您使用了两种设置坐标的方法—组的变换属性和圆的cx和cy属性。在没有任何拖动的情况下,位置完全由后者确定。拖动时,将设置组的平移,该平移将在其他属性上生效。也就是说,您正在将之前位于(0,0)的组平移到圆的当前位置,导致坐标跳变,因为cx
但是,当我尝试拖动项目时,第一次拖动会将项目移离其当前坐标,但随后所有内容都会正常拖动。我不明白为什么第一次拖动时会出现奇怪的行为。问题是,您使用了两种设置坐标的方法—组的
变换属性和圆的cx
和cy
属性。在没有任何拖动的情况下,位置完全由后者确定。拖动时,将设置组的平移,该平移将在其他属性上生效。也就是说,您正在将之前位于(0,0)的组平移到圆的当前位置,导致坐标跳变,因为cx
位置保持不变
如果你只使用其中一种方法,以后会省去一些麻烦。我已将您的JSFIDLE修改为仅使用转换
。通过这种方式,拖动工作与预期一样,没有任何跳跃。此外,您只需要指定文本的相对偏移量,而不是绝对偏移量。完美的解释。非常感谢。
var circle = svg.append('svg:g').selectAll('circle')
.data(nodes, function(d) { return d.id; });
var g = circle.enter().append('svg:g').call(drag);
g.append('svg:circle').attr('class', 'node')
.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; })
.attr('r', 30)
.style('fill', function(d) { return d3.rgb(colors(d.id)).brighter().toString(); })
.style('stroke', function(d) { return d3.rgb(colors(d.id)).darker().toString(); });
g.append('svg:text')
.attr('x', function (d) { return d.x + 0; })
.attr('y', function (d) { return d.y + 4; })
.attr('class', 'id')
.text(function(d) { return d.id; });
var drag = d3.behavior.drag()
.on('drag', function (d,i) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this).attr("transform", function (d, i) {
return "translate(" + [d.x,d.y] + ")";
})
});