將元素放在圓圈d3.js

Question

我在d3中有一個模擬時鐘。 我需要把散點圖放在裏面。 我有json數據數組，每個對象都有時間屬性。 我創建了一些小圈子，將它們放在時鐘中，但我需要幫助，根據它們的時間屬性進行放置。 （不管它們距離鐘錶中心的距離）。 如果同時有一些條目，它們應該是一個接一個，靠近中心。

我應該如何根據他們的時間屬性將他們放在正確的位置？ 請指點 在此先感謝

Answer 1

正如你在D3做模擬時鐘，該結構將是這樣的： -

<svg> 
<g> 
<line transform="rotate(0)" y2="190" y1="200" x2="0" x1="0" minutes=0></line> 
<line transform="rotate(6)" y2="190" y1="200" x2="0" x1="0" minutes=1></line> 
....... 
</g> 
</svg> 

每個<line>是每分鐘線於是兩個consecutives之間的區別分鐘就會6度（360/60）。

您的數據將像

var data=[ 
{"someProperty":"someValue","time":"4"}, 
{"someProperty":"someValue","time":"2"}, 
{"someProperty":"someValue","time":"45"}, ..... 
] 

趁現在循環遍歷DOM所有<line>，你可以映射「時間」和「分」值，只是匹配<line>和減少Y2值後繪製<circle>比如說10個單位。同樣如果有一些條目在同一時間，那麼將會有<circle>標記已經存在，因此將y2值減少10 * 2個單位，依此類推。 只是一個大概的想法..希望這有助於..