将元素放在圆圈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个单位，依此类推。 只是一个大概的想法..希望这有助于..