模拟时钟中的散点图答案

【问题标题】：Scatter Chart in analog clock模拟时钟中的散点图
【发布时间】：2015-02-14 20:16:58
【问题描述】：

我有一个这样的 json 数据数组：

var data=[
{"someProperty":"number","time":"2014-12-11T09:24:39.000Z"}, 
{"someProperty":"number","time":"2014-12-11T09:27:39.000Z"}, 
{"someProperty":"number","time":"2014-12-11T09:30:39.000Z"}, ..... 
]

我需要为数组中的每一个画一个圆（半径为“someProperty”）并根据时间将它们放入模拟时钟中。我在这里找到了与我的问题相似的图片：

但没有代码:(

我为此使用 d3.js。我通过使用旋转成功地做到了这一点，但是圆周上的所有圆圈都相互交叉。我想把它们放在半径上以避免碰撞。我看到了一些碰撞检测的例子，比如http://bl.ocks.org/mbostock/1747543 但我没有看到任何选项可以像我想要的那样控制 x,y 位置。

【问题讨论】：

看看这个页面。我想这就是你所追求的。 bl.ocks.org/sathomas/1ca23ee9588580d768aa
如果你不想自己拖动它们，你应该考虑自己定位它们，而不是使用 cpu 昂贵的库来旋转和检测碰撞等。这不是很清楚你想要什么。如果它们必须是可拖动的等？如果没有......也许你应该阅读一些关于基本几何的东西，而不是尝试如此繁重的库。

标签： javascript svg d3.js force-layout

【解决方案1】：

如果我没看错，“someProperty”将提供半径值，“time”将提供角度。

我建议将这些基准转换为极坐标，如下所述：d3.js Plot elements using polar coordinates

Theta 是从“时间”转换而来的角度。 r 将是“someProperty”

【讨论】：