拖动事件后圆圈的Cx没有更新？

Posted 2021-03-28

我正在用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之后获取圆的坐标？

答案

您通过在对象上设置变换来实现拖动，这与cx，cy无关，因此它们永远不会改变。

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