d3での回転方向の設定

Question

クリック可能な点が少ない円があります。これらのうちの1つをクリックすると、右側（ゼロ度）の位置に回転します。上の点（90度）をクリックすると円が時計回りに回転し、下の点（270度）をクリックすると反時計回りに回転します。基本的に、最短の道を歩いて右に行く。問題は、私が下の点（青い星）をクリックすると、円は最も右側にあるために最も長い経路を取ることです。それをもう少し詳しく見ると、各ポイントに特定の方向が設定されているように見え、どこにあってもその方向に従います。

どのように回転方向を制御しますか？これに対する指針は高く評価されています。

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}

Answer 1

あなたは必要な回転のみを追跡するだけでなく、回転の全体を追跡する必要もあります。たとえば、上にある星が何かをクリックし続けると、移動するのに必要な度合いは、[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>

Answer 2

でも利用可能です。