javascript - 如何拖放矩形

Question

无法在 d3js 中拖动矩形。该代码对我来说看起来不错。我在这里缺少什么？

所有拖动行为(如开始拖动和拖动结束)都已实现，但拖动仍然不起作用

这是我的代码:

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

 var rect = svgContainer.append("rect")
                        .attr("x", 10)
                        .attr("y", 50)
                        .attr("width", 51)
                        .attr("height", 41)
                        .attr("stroke", "#7E7E7E")
                        .attr("cursor", "move")

var drag = d3.behavior.drag()
                        .on("dragstart", dragstart)
                        .on("drag", drag)
                        .on("dragend", dragend);

                function dragstart()
                {
                    d3.event.sourceEvent.stopPropagation();
                }

                function drag()
                {
                    var self = d3.select(this);
                    //var translate =d3.transform(self.getAttribute("transform")).translate;
                      var translate = d3.transform(self.attr("transform")).translate;
                    var x = d3.event.dx + translate[0],
                            y = d3.event.dy + translate[1];
                    self.attr("transform", "translate(" + x + "," + y + ")");
                }

                function dragend()
                {
                    var mouseCoordinates = d3.mouse(this);
                    if (mouseCoordinates[0] > 170)
                    {
                        //Append new element
                        svg.append("g").append("rect")
                            .attr("x", mouseCoordinates[0])
                            .attr("y", mouseCoordinates[1])
                            .attr("width", 51)
                            .attr("height", 41)
                            .attr("stroke", "#7E7E7E")
                            .style('cursor', 'move')
                            .classed("initialDragRect", true)
                            .call(drag);
                    }
                }
                rect.call(drag);

Answer 1

在函数中更改代码上的 translate 变量声明，并将其拖入此

var translate = d3.transform(self.attr("transform")).translate;

问题是因为self变量没有函数getAttribute()