AngularJS + d3js：调整对象大小的问题

Question

我正在尝试将AngularJS与d3集成以进行拖动和调整大小。 我设法创建了一个rect对象，该对象可以在SVG元素中拖动，并可以使用调整大小手柄调整大小。 调整大小可以处理应有的工作，但是当我尝试向北或向东调整大小时，调整大小是不稳定的。 我创建了以下Plunk作为该问题的演示： http ://plnkr.co/tG19vpyyw0OHMetLOu2U。 （我已经简化了它以显示遇到的问题，因此只有一个调整大小的句柄。）

拖动可以正常工作，并且向西和向南调整大小也可以（在演示中未显示）。

想通了，我会问社区，看看以前是否有人遇到过这个问题。 谢谢你们。

Answer 1

问题是您要修改rect元素本身和封闭的g元素。 设置rect的大小和g的位置之间存在非常短的延迟，这仅仅是因为必须使用两个单独的命令来完成。 在此延迟期间，光标相对于拖动矩形的位置发生变化，从而触发一个新的drag事件，其值对应于不一致的中间状态。 此后立即修复（两个元素的属性都已调整后），并且触发了新的drag事件来修复不一致问题，但这种闪烁很明显。

解决此问题的最简单方法是更改rect大小和位置， 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);

我已经在这里使用此解决方案更新了您的代码。