Question

在拖动后附加或创建新圆圈后，我希望能够拖动圆圈。我使用.call(d3.behavior.drag()...)尝试了以下代码，但不知道它为什么不起作用

预览：http://jsbin.com/vabowofiqe/1/edit?html,output

代码：

    var svgContainer = d3.select("body").append("svg")
                            .attr("width", 800)
                            .attr("height", 803);

                    //Draw the Circle
                    var circle = svgContainer.append("circle")
                            .attr("cx", 35)
                            .attr("cy", 145)
                            .attr("r", 25)
                            .style("stroke-opacity", .9)
                            .style("stroke", "green")
                            .style("stroke-width", 2)
                            .style('cursor', 'move')
                            .style("fill", "white");

                    function move() {
                        d3.select(this)
                                .attr('x', d3.event.x)
                                .attr('y', d3.event.y);
                    };

                    var drag = d3.behavior.drag()
                            .origin(function ()
                            {
                                var t = d3.select(this);
                                return {x: t.attr("x"), y: t.attr("y")};
                            })

                            .on('dragend', function (d) {
                                var mouseCoordinates = d3.mouse(this);
                                if (mouseCoordinates[0] > 170) {
                                    //Append new element
                                    var newCircle = d3.select("svg").append("circle")
                                            .classed("drg", true)
                                            .attr("cx", 100)
                                            .attr("cy", 100)
                                            .attr("r", 20)
                                            .attr("cx", mouseCoordinates[0])
                                            .attr("cy", mouseCoordinates[1])
                                            .style("fill", "white")
                                            .style("stroke-width", 2)
                                            .style("stroke", "#CDB483")
 //Calling the drag behavior after clonning         .call(
                                                    d3.behavior.drag()
                                                    .on('drag', move).origin(function () {
                                                var t = d3.select(this);
                                                return {x: t.attr("cx"), y: t.attr("cy")};
                                            }));
                                    ;
                                }
                            });
                    circle.call(drag);

Answer 1

SVG圈元素没有x和y属性，但cx和cy属性可用于定位它们。您应该相应地更改move功能。

function move() {
    d3.select(this)
        .attr('cx', d3.event.x)
        .attr('cy', d3.event.y);
};

如何用鼠标移动拖动元素

1 个答案: