[英]How to rotate figure in D3?
The task is to rotate figure with d3, PowerPoint-like way: 任务是用d3旋转图形,类似PowerPoint的方式:
Got this example , trying to achieve the same behaviour. 有了这个例子 ,尝试实现相同的行为。 Can't understand, where the mistake is - figure is shaking, is not rotating the way it should. 无法理解,错误在哪里 - 身材在颤抖,是不是应该旋转的方式。
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 })`)
}
Here's a JSFiddle and alternatively, a snippet view: 这是一个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>
Thanks in advance! 提前致谢!
The problem is the container for the drag. 问题是拖动的容器。 The default container is this.parentNode
, where this
is the element which the drag is applied on. 默认容器是this.parentNode
,其中this
是应用拖动的元素。 You apply a drag to a circle and its parent node is a g
. 您将拖动应用于圆圈,其父节点为g
。 In your drag event you rotate the parent. 在拖动事件中,您可以旋转父项。 This matters because: 这很重要,因为:
What we really want is a fixed coordinate system to reference the drag event, the SVG itself would be fine, or a parent g
- something that doesn't change its transform each drag. 我们真正想要的是一个固定的坐标系来引用拖拽事件,SVG本身就可以了,或者是一个父g
- 它不会改变每个拖拽的变换。 So, let's set the drag container to something like the parent of the rotating g
. 所以,让我们将拖动容器设置为旋转g
的父级。 The parent of the rotating g
is your svg with a static coordinate system, so lets try: 旋转g
的父级是带有静态坐标系的svg,所以让我们试试:
d3.drag()
.on('start', startRotation)
.on('drag', rotate)
.container(function() { return this.parentNode.parentNode; })
That seems to avoid the jitters and give us a smooth transition (updated fiddle ) 这似乎避免了紧张,并给我们一个平稳的过渡(更新小提琴 )
Here's a simplified snippet to demonstrate with the same functionality: 这是一个简化的代码片段,用于演示相同的功能:
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>
In the snippet I'm relying on this as a quick and easy example on getting the angle from the point 在片段中,我依靠这个作为从角度获得角度的快速简单的例子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.