Question

我有一个简单的矩形作为SVG附加。我想用鼠标拖动来旋转它，所以我使用了函数d3.drag()。以下是我为实现这一目标而尝试的方法，但它似乎不起作用：

<div id = "svgcontainer"></div>
         <script language = "javascript">
            var width = 300;
            var height = 300;
            var origin = {
                x: 55,
                y: -40
            };
            var svg = d3.select("#svgcontainer")
               .append("svg")
               .attr("width", width)
               .attr("height", height);

            var group = svg.append("g");

            var rect = group.append("rect")
               .attr("x", 20)
               .attr("y", 20)
               .attr("width", 60)
               .attr("height", 30)
               .attr("fill", "green")

            group.call(d3.drag().on('drag', dragged));

            function dragged() {
                var r = {
                    x: d3.event.x,
                    y: d3.event.y
                };
                group.rotate([origin.x + r.x, origin.y + r.y]);
            };


         </script>

当我点击矩形并尝试将其拖动到旋转时，我在group.rotate(...)的最后一行收到一些错误。任何人都可以在这段代码中理清错误。

Answer 1

group是包含g的d3选择，它没有旋转方法，但您可以使用以下选项设置选择的变换属性：

group.attr("transform",rotate(θ,cx,cy));

从示例中，我不确定您想要如何旋转块，我已经在下面的示例中设置了根据拖动沿x轴的移动绕中心旋转：

＆＃13;

var width = 300;
            var height = 300;
            var origin = {
                x: 50,
                y: 35
            };
            var svg = d3.select("#svgcontainer")
               .append("svg")
               .attr("width", width)
               .attr("height", height);

            var group = svg.append("g");

            var rect = group.append("rect")
               .attr("x", 20)
               .attr("y", 20)
               .attr("width", 60)
               .attr("height", 30)
               .attr("fill", "green")

            group.call(d3.drag().on('drag', dragged));

            function dragged() {
                var r = {
                    x: d3.event.x,
                    y: d3.event.y
                };
                group.attr("transform","rotate("+r.x+","+origin.x+","+origin.y+")" );
            };

＆＃13;

rect {
  cursor: pointer;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<div id="svgcontainer"></div>

＆＃13;

如何使用d3.drag（）旋转SVG？

1 个答案: