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);

我已經在這里使用此解決方案更新了您的代碼。