0

我正在用 d3 的可拖动 svg 的圆圈写一个图表。到目前为止，我有这样的事情：

var drag1 = d3.behavior.drag()
    .origin(function() { 
        var t = d3.select(this);
        return {x: t.attr("x") + d3.transform(t.attr("transform")).translate[0],
                y: t.attr("y") + d3.transform(t.attr("transform")).translate[1]};
    })
    .on("drag", function(d,i) {
        d3.select(this).attr("transform", function(d,i){
            return "translate(" + [ 0,d3.event.y ] + ")"
        })
    });
d3.selectAll("circle").call(drag1);

我想存储oldY和mousedown分配newY。mouseup

    .on("mousedown", function(d){
        var th = d3.select(this);

        d.oldY = +th.attr("cy");
    })
    .on("mouseup", function(d){
        var th = d3.select( this );

        var coordinates = [0, 0];
        coordinates = d3.mouse( this.parentNode );
        console.log( "d3.mouse( this.parentNode )[1]  " + d3.mouse( this.parentNode )[1] );
        console.log("d3.event.pageY  "  + d3.event.pageY);
        console.log("th.attr('cy')  " + th.attr("cy"));

        //?? 
        th.attr("cy",d3.event.pageY  );

        d.newY = ?? what ??
        console.log(d);
    });

我需要oldY并且newY出于另一个功能的目的，我该如何在拖动或更新 cx 和 cy 后获取圆的坐标？

4

1 回答 1

1

您通过在对象上设置一个变换来实现拖动，该变换独立于 cx、cy，因此它们永远不会改变。

如果你想要转换后的坐标，你可以调用getBBox来获取边界框，因为你正在拖动一个圆圈，所以圆圈的中心将是边界框的中心。getBBox 将包括 transform 和 cx, cy 值。

于 2013-09-02T12:35:25.640 回答