1

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

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

想我会问社区，看看是否有人以前遇到过这种情况。谢谢你们。

4

1 回答 1

2

问题是您正在修改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);

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

于 2013-07-04T17:38:33.350 回答