Использование события keydown с d3.drag () для поворота SVG

Question

У меня есть SVG, и я хочу применить к нему преобразование вращения, но не просто перетаскиванием мышью, а перетаскиванием мышью при нажатии клавиши alt.Я пытался что-то реализовать, но, похоже, все работает не так, как я хочу.Ниже то, что я реализовал.Как я могу повернуть SVG при перетаскивании мыши при нажатии клавиши alt?

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+")" );
                }
            };

Answer 1

Вам нужно использовать d3.event.sourceEvent.x и d3.event.sourceEvent.y.Изменение этого параметра должно обеспечить работоспособность вашего кода.

Чтобы переместить / увеличить ваш элемент, создайте и else условие и просто используйте sketchSVG.attr("transform",d3.event.transform) для zooming и 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