Question

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

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

想想我会问社区，看看是否有人之前遇到过这种情况。谢谢大家。

Answer 1

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

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

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

1 个答案: