javascript - 使用带有 d3.drag () 的 keydown 事件来旋转 SVG

Question

我有一个 SVG，我想在它上面应用旋转变换，但不只是用鼠标拖动，而是在按下alt键的同时用鼠标拖动。我试图实现一些东西，但事情似乎没有按我的意愿工作。以下是我已经实施的。如何在按住alt键的同时拖动鼠标旋转 SVG？

var width = 590, height = 400;


var svg = d3.select("#sketch4").append("svg")
    .attr("width", width)
    .attr("height", height)
    //.call(d3.zoom().on("zoom", zoomed))
    .call(d3.drag().on('drag', dragged))
    .append("g")

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



  function dragged() {
                if (d3.event.sourceEvent.altKey){
                var me = sketchSVG.node()
                var x1 = me.getBBox().x + me.getBBox().width/2;
                var y1 = me.getBBox().y + me.getBBox().height/2;
                sketchSVG.attr("transform","rotate("+d3.event.y+","+x1+","+y1+")" );
                metricSVG.attr("transform","rotate("+d3.event.y+","+x1+","+y1+")" );
                }
            };

标签： javascriptd3.jssvg

Answer 1

您需要使用d3.event.sourceEvent.x和d3.event.sourceEvent.y。改变它应该让你的代码工作。

要移动/缩放您的元素，请创建和设置else条件，然后使用sketchSVG.attr("transform",d3.event.transform)forzooming和translating元素。

var width = 590,
  height = 400;


var svg = d3.select("#sketch4").append("svg")
  .attr("width", width)
  .attr('id', 'sketchSvg')
  .attr("height", height)
  .append("g")

d3.select('#sketchSvg')
  .call(d3.zoom().on("zoom", dragged))

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



function dragged(d) {
  if (d3.event.sourceEvent.altKey && d3.event.sourceEvent.type == 'mousemove') {
    var me = svg.node()
    var x1 = me.getBBox().x + me.getBBox().width / 2;
    var y1 = me.getBBox().y + me.getBBox().height / 2;
    svg.attr("transform", "rotate(" + d3.event.sourceEvent.y + "," + x1 + "," + y1 + ")");
  }
};

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

这是JSFiddle上的一个