在d3中设置旋转方向
问题描述:
我有一个可点击几个点的圆。当我单击其中一个时,我想让它旋转到右侧(零度)的位置。当我点击顶部的点(90度)时,我想让圆圈顺时针旋转,当我点击底部的点(270度)时,我想让它逆时针旋转。本质上,走最短路径到右侧。问题是,当我点击最低点(蓝色星)时,该圆圈将最长的路径置于右侧。如果你多花一点时间,可以看到它似乎为每个点设置了一个特定的方向,不管它们在哪里,都遵循这个方向。在d3中设置旋转方向
如何控制旋转方向?任何指向这一点的赞赏。
function rotate(angle) {
d3.select('.container')
.attr('transform', `rotate(${angle})`);
}
body {
margin: 0 auto;
text-align: center;
padding: 10px;
}
.container {
transform-origin: 250px 250px;
transition: all 0.5s ease-in;
}
.star {
cursor: pointer;
}
.star--red {
fill: red;
}
.star--green {
fill: green;
}
.star--blue {
fill: lightblue;
}
.star--pink {
fill: salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="0 0 500 500">
<g class="container">
<ellipse id="main-circle" stroke-width="2" ry="145" rx="145" cy="250" cx="250" stroke="#000" fill="#fff"/>
<path id="svg_8" class="star star--red" onclick="rotate(90);"
d="m228.500007,135.025599l16.424656,0l5.075345,-15.603354l5.075348,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643555l-13.287804,9.643555l5.075609,-15.603354l-13.287806,-9.643293z"/>
<path id="svg_9" class="star star--green" onclick="rotate(180);"
d="m119.362495,245.178355l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
<path id="svg_10" class="star star--blue" onclick="rotate(270);"
d="m228.500007,355.025599l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
<path id="svg_11" class="star star--pink" onclick="rotate(0);"
d="m337.362495,245.178355l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
</g>
</svg>
基本上我已经在这里复制粘贴codepen代码,但笔也可在https://codepen.io/anon/pen/LjMVzM
答
您不能随便跟踪所需的旋转,您还需要跟踪总旋转。例如,如果您继续点击顶部所需的度数,则继续前进至[0, 90, 180, 270, 360, 450, ...]
。一旦跟踪完整的旋转,你需要做的就是确定增量的方向,如下所示。
var totAngle = 0;
function rotate(angle) {
d3.select('.container')
.attr('transform',() => {
// Clamp the current rotation to 0-360
var minAngle = ((totAngle % 360) + 360) % 360;
// Calculate the required rotation 0/90/180/270
var rot = (angle - minAngle + 360) % 360;
// Determine the direction clockwise/counter-clockwise
totAngle += rot <= 180 ? rot : -90
return `rotate(${totAngle})`;
});
}
body {
margin: 0 auto;
text-align: center;
padding: 10px;
}
.container {
transform-origin: 250px 250px;
transition: all 0.5s ease-in;
}
.star {
cursor: pointer;
}
.star--red {
fill: red;
}
.star--green {
fill: green;
}
.star--blue {
fill: lightblue;
}
.star--pink {
fill: salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="0 0 500 500">
<g class="container">
<ellipse id="main-circle" stroke-width="2" ry="145" rx="145" cy="250" cx="250" stroke="#000" fill="#fff"/>
<path id="svg_8" class="star star--red" onclick="rotate(90);"
d="m228.500007,135.025599l16.424656,0l5.075345,-15.603354l5.075348,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643555l-13.287804,9.643555l5.075609,-15.603354l-13.287806,-9.643293z"/>
<path id="svg_9" class="star star--green" onclick="rotate(180);" d="m119.362495,245.178355l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
<path id="svg_10" class="star star--blue" onclick="rotate(270);"
d="m228.500007,355.025599l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
<path id="svg_11" class="star star--pink" onclick="rotate(0);"
d="m337.362495,245.178355l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
</g>
</svg>
+0
非常感谢你,帮助我理解问题! – LocustHorde
你试过-90度? – magjac
@magjac是的,当蓝星位于顶部时,制作“星 - 蓝”-90度不起作用。它反时针旋转而不是顺时针旋转 – LocustHorde
您问过如何控制旋转方向,而不是如何修正代码。不要忘记感谢@安德鲁为你做这件事。 – magjac