问题是您正在修改rect
元素本身和封闭g
元素。rect
设置大小和位置之间有很短的延迟,g
因为这必须使用两个单独的命令来完成。在此延迟期间,相对于拖动矩形的光标位置发生变化,触发一个新drag
事件,其值对应于不一致的中间状态。这会在之后立即修复(一旦两个元素的属性都已调整)并 drag
触发一个新事件来修复不一致,但它会以闪烁的形式出现。
解决此问题的最简单方法是更改元素的大小和位置,而不更改元素的rect
任何g
内容。这意味着还要调整拖动矩形的位置并使代码不太美观,但避免了计时/不一致问题。
所以myrect
变成
var myRect = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
.attr("data-ng-width", "{{square.w}}")
.attr("data-ng-height", "{{square.h}}")
.attr("stroke", "yellow")
.attr("stroke-width", 3)
.attr("fill-opacity", 0)
.attr("data-ng-x", "{{square.x}}")
.attr("data-ng-y", "{{square.y}}");
和resizer
var resizer = myGroup.append("rect")
.attr("width", 5)
.attr("height", 5)
.attr("stroke", "blue")
.attr("stroke-width", 1)
.attr("fill-opacity", 0)
.attr("cursor", "nw-resize")
.attr("x", "{{square.x-2.5}}")
.attr("y", "{{square.y-2.5}}")
.call(nresize);
我已在此处使用此解决方案更新了您的代码。