1

JSFiddle：http: //jsfiddle.net/Umugb/19/

我编写了下面的代码来在 svg 上拖动一组元素。每个g元素都有一个circle可拖动的（但除此之外没有其他元素）。但是，当我拖动圆圈时，我想g用它来翻译其余的圆圈。

问题是拖拽出了问题。如果我取出变换，而只是将circle's cx 和 cy 更改为 new_cx 和 new_cy，那么圆可以按预期移动。但是，使用变换时，所有元素都以异常大的绝对值从页面飞出 d3.event.dx/dy。

下面的代码有什么明显的问题吗？或者有人对为什么会发生这种情况有进一步的了解吗？

var drag = d3.behavior.drag().on("drag", translate);
function translate() {
    var g = $("#" + this.parentNode.id);
    var circle = d3.select(this);
    var r  = parseInt(circle.attr("r"));
    var box_width =  Math.max(g[0].getElementsByClassName('circletext')[0].getBBox().width, 2*r);

    var cx = parseInt(circle.attr("cx"));
    var cy = parseInt(circle.attr("cy"));
    if (g.attr("transform")) {
        var translate = g.attr("transform").split('translate')[1].split(',');
        cx = cx + parseInt(translate[0].slice(1));
        cy = cy + parseInt(translate[1].slice(0,-1));
    }

    var new_cx = Math.max(r, Math.min(width - box_width + r, d3.event.dx + cx));
    var new_cy = Math.max(r, Math.min(height - r, d3.event.dy + cy));
    d3.select("#" + this.parentNode.id).
        attr("transform",
             "translate(" + (new_cx-cx) + "," + (new_cy-cy) + ")");

编辑：在顶部更新了 JSFiddle

4

0 回答 0