如何在D3中旋轉圖形？

Question

任務是用d3旋轉圖形，類似PowerPoint的方式：

有了這個例子 ，嘗試實現相同的行為。 無法理解，錯誤在哪里 - 身材在顫抖，是不是應該旋轉的方式。

  function dragPointRotate(rotateHandleStartPos) {

    rotateHandleStartPos.x += d3.event.dx;
    rotateHandleStartPos.y += d3.event.dy;

    const updatedRotateCoordinates = r

    // calculates the difference between the current mouse position and the center line
    var angleFinal = calcAngleDeg(
      updatedRotateCoordinates,
      rotateHandleStartPos
    );
    // gets the difference of the angles to get to the final angle
    var angle =
      rotateHandleStartPos.angle +
      angleFinal -
      rotateHandleStartPos.iniAngle;

    // converts the values to stay inside the 360 positive
    angle %= 360;
    if (angle < 0) {
      angle += 360;
    }

    // creates the new rotate position array
    var rotatePos = [
      angle,
      updatedRotateCoordinates.cx,
      updatedRotateCoordinates.cy,
    ];

    r.angle = angle

    d3.select(`#group`).attr('transform', `rotate(${ rotatePos })`)

  }

這是一個JSFiddle ，也可以是一個片段視圖：

 const canvas = document.getElementById('canvas') d3.select(canvas).append('svg') .attr('width', '500') .attr('height', '500') .append('g') .attr('id', 'group') .append('rect') .attr('width', '100') .attr('height', '100') .attr('x', '100') .attr('y', '100') d3.select('#group').append('circle') .attr('r', '10') .attr('cx', '150') .attr('cy', '80') .call(d3.drag() .on('start', startRotation) .on('drag', rotate) ) let rotateHandleStartPos, r = { angle: 0, cx: 0, cy: 0 } function startRotation () { const target = d3.select(d3.event.sourceEvent.target) r.cx = getElementCenter().x r.cy = getElementCenter().y let updatedRotateCoordinates = r // updates the rotate handle start posistion object with // basic information from the model and the handles rotateHandleStartPos = { angle: r.angle, // the current angle x: parseFloat(target.attr('cx')), // the current cx value of the target handle y: parseFloat(target.attr('cy')), // the current cy value of the target handle }; // calc the rotated top & left corner if (rotateHandleStartPos.angle > 0) { var correctsRotateHandleStartPos = getHandleRotatePosition( rotateHandleStartPos ); rotateHandleStartPos.x = correctsRotateHandleStartPos.x; rotateHandleStartPos.y = correctsRotateHandleStartPos.y; } // adds the initial angle in degrees rotateHandleStartPos.iniAngle = calcAngleDeg( updatedRotateCoordinates, rotateHandleStartPos ); } function rotate () { dragPointRotate(rotateHandleStartPos) } function getElementCenter () { const box = document.querySelector('#group > rect').getBBox() return { x: box.x + box.width / 2, y: box.y + box.height / 2, } } function getHandleRotatePosition(handleStartPos) { // its possible to use "cx/cy" for properties var originalX = handleStartPos.x ? handleStartPos.x : handleStartPos.cx; var originalY = handleStartPos.y ? handleStartPos.y : handleStartPos.cy; // gets the updated element center, without rotatio var center = getElementCenter(); // calculates the rotated handle position considering the current center as // pivot for rotation var dx = originalX - center.x; var dy = originalY - center.y; var theta = (handleStartPos.angle * Math.PI) / 180; return { x: dx * Math.cos(theta) - dy * Math.sin(theta) + center.x, y: dx * Math.sin(theta) + dy * Math.cos(theta) + center.y, }; } // gets the angle in degrees between two points function calcAngleDeg(p1, p2) { var p1x = p1.x ? p1.x : p1.cx; var p1y = p1.y ? p1.y : p1.cy; return (Math.atan2(p2.y - p1y, p2.x - p1x) * 180) / Math.PI; } function dragPointRotate(rotateHandleStartPos) { rotateHandleStartPos.x = d3.event.x; rotateHandleStartPos.y = d3.event.y; const updatedRotateCoordinates = r // calculates the difference between the current mouse position and the center line var angleFinal = calcAngleDeg( updatedRotateCoordinates, rotateHandleStartPos ); // gets the difference of the angles to get to the final angle var angle = rotateHandleStartPos.angle + angleFinal - rotateHandleStartPos.iniAngle; // converts the values to stay inside the 360 positive angle %= 360; if (angle < 0) { angle += 360; } // creates the new rotate position array var rotatePos = [ angle, updatedRotateCoordinates.cx, updatedRotateCoordinates.cy, ]; r.angle = angle d3.select(`#group`).attr('transform', `rotate(${ rotatePos })`) } 

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

提前致謝！

Answer 1

問題是拖動的容器。 默認容器是this.parentNode ，其中this是應用拖動的元素。 您將拖動應用於圓圈，其父節點為g 。 在拖動事件中，您可以旋轉父項。 這很重要，因為：

• 容器設置拖動事件的坐標系（請參閱此處的文檔）。
• 通過旋轉g，可以在拖動過程中更改坐標系。

我們真正想要的是一個固定的坐標系來引用拖拽事件，SVG本身就可以了，或者是一個父g - 它不會改變每個拖拽的變換。 所以，讓我們將拖動容器設置為旋轉g的父級。 旋轉g的父級是帶有靜態坐標系的svg，所以讓我們試試：

d3.drag()
    .on('start', startRotation)
    .on('drag', rotate)
    .container(function() { return this.parentNode.parentNode; })

這似乎避免了緊張，並給我們一個平穩的過渡（更新小提琴 ）

這是一個簡化的代碼片段，用於演示相同的功能：

 var svg = d3.select("svg"); var drag = d3.drag() .on("drag", dragged) // Set coordinate system to a frame of reference that doesn't move. .container(function() { return this.parentNode.parentNode }); var contentG = svg.append("g") .attr("transform","translate(100,100)"); // center of rotation var rotatingG = contentG.append("g"); var circle = rotatingG.append("circle") .attr("cx", 0) .attr("cy", -75) .attr("r", 10) .call(drag); var rect = rotatingG.append("rect") .attr("width", 100) .attr("height", 100) .attr("x", -50) .attr("y", -50); function dragged() { var x = d3.event.x, y = d3.event.y, angle; if (x < 0) { angle = 270 - (Math.atan(y / -x) * 180 / Math.PI); } else { angle = 90 + (Math.atan(y / x) * 180 / Math.PI); } rotatingG.attr("transform","rotate("+angle+")"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg width="500" height="500"></svg> 

在片段中，我依靠這個作為從角度獲得角度的快速簡單的例子