编辑:我还没有到那儿。我对这个问题悬赏了，因为我真的可以解决这个问题。我用代表不围绕中心旋转的行星的元素的想法来凑合。因此，您可以跳过第 1 步和第 2 步，直接转到第 3 步来帮助我。
原创:我正在做一个有趣的小项目。这是一个行星围绕太阳旋转的太阳系。我认为这是一个包含 3 个大步骤的模拟。
第一步:创建一个包含 8 颗行星的功能性旋转太阳系。
第二步:创建一个函数，添加围绕同一个太阳旋转的新行星，点击一个按钮，其细节是随机的(即:与太阳的距离，行星的颜色，行星的大小等)
我正处于第三步，我不想再让事情变得随机了。第三步对我来说是迄今为止最难的一步，因为我对 JSON 的经验很少。我从 NASA 网站上获得了太阳系以外所有系外行星的数据，我想使用添加对象的功能将这些单独的对象(行星)添加到模拟中。
我的问题是:我的代码需要如何查看才能让您在我的代码的 JSON 数组中看到的每条记录都作为远离黑色 Blob 的元素屏幕的中心(见 fiddle )在一个随机的 Angular ，所以它并不都是对齐的。最后，我希望在屏幕上显示成千上万个代表行星的小 Blob ，其中目前唯一可见的黑色 Blob 是太阳。
这是因为在我的 JSON 文件中有成千上万个这样的行星，我想看到它们都以各自与太阳的距离“Distance [pc]”、各自的大小“Planet Radius [Jupiter radii]”旋转”。当然，科学不需要是准确的，但在某种程度上应该是准确的。例如，具有最大距离 [pc](以秒差距为单位的距离)的行星需要距离最远，但仍然能够在屏幕上看到，即使它只是一个小 Blob 。
现在我知道需要一些数学来根据距离属性适本地定位每个行星，因为它们在秒差距中被列为距离，一些转换方法是为了将它们全部放在同一个屏幕上，而它们'仍然可见。
这是我的代码，但不是全部。要查看所有内容，请单击此代码下发布的链接。
//this is an array that holds all of the json data
var arr= [
{
"rowid": 1,
"Host name": "11 Com",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 19.4,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 110.62,
"Effective Temperature [K]": 4742,
"Date of Last Update": "5/14/2014"
},
{
"rowid": 2,
"Host name": "11 UMi",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 10.5,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 119.47,
"Effective Temperature [K]": 4340,
"Date of Last Update": "5/14/2014"
},
{
"rowid": 3,
"Host name": "14 And",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 4.8,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 76.39,
"Effective Temperature [K]": 4813,
"Date of Last Update": "5/14/2014"
},
{
"rowid": 4,
"Host name": "14 Her",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 4.64,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 18.15,
"Effective Temperature [K]": 5311,
"Date of Last Update": "5/14/2014"
}];
//these variables hold specific properties
var distance;
var planetRadius;
var rowid;
var hostName;
for(var i=0;i<arr.length;i++){
rowid= arr[i]["rowid"];
distance= arr[i]["Distance [pc]"];
hostName= arr[i]["Host name"];
planetRadius=arr[i]["Planet Radius [Jupiter radii]"];//This is the idea how we should access the json objects, as your operations are not clear to us just I'm giving the idea
// Do what ever you want with individual object
if(planetRadius !== null){
// If planet radius not null do whatever you want.
}
}
这fiddle持有基本代码。 注意:此链接包含代码中的所有 3000 多个行星，因此它可能会在加载方面对您产生影响。如果您的浏览器不正常，只需在 URL 中输入 1 而不是 2 即可转到草稿，其中只有几个 hte 行星的示例。
最佳答案
让我试一试:
查看此 fiddle .距离是对数的，因此所有行星都适合屏幕。
var arr= [
{
"rowid": 1,
"Host name": "11 Com",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 19.4,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 110.62,
"Effective Temperature [K]": 4742,
"Date of Last Update": "5/14/2014"
},
{
"rowid": 2,
"Host name": "11 UMi",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 10.5,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 119.47,
"Effective Temperature [K]": 4340,
"Date of Last Update": "5/14/2014"
},
{
"rowid": 3,
"Host name": "14 And",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 4.8,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 76.39,
"Effective Temperature [K]": 4813,
"Date of Last Update": "5/14/2014"
},
{
"rowid": 4,
"Host name": "14 Her",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 4.64,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 18.15,
"Effective Temperature [K]": 5311,
"Date of Last Update": "5/14/2014"
}];
var distance;
var planetRadius;
var rowid;
var hostName;
var svg=document.getElementById("Layer_1");
for(var i=0;i<arr.length;i++){
rowid= arr[i]["rowid"];
distance= arr[i]["Distance [pc]"];
hostName= arr[i]["Host name"];
planetRadius=arr[i]["Planet Radius [Jupiter radii]"];//This is the idea how we should access the json objects, as your operations are not clear to us just I'm giving the idea
// Do what ever you want with individual object
if(planetRadius !== null){
// If planet radius not null do whatever you want.
var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");
circle.setAttribute("class","fillblack");
circle.setAttribute("cx","0");
circle.setAttribute("cy","0");
circle.setAttribute("r",planetRadius.toString());
var logDist=Math.log(distance+1)*50;
var angle=0; // change this based on the current time, if you would like an animation
circle.setAttribute("transform","translate(500 300.8) rotate("+angle+") translate("+logDist+")");
svg.appendChild(circle);
}
}
window.requestAnimationFrame(function(){
// do your animations here
});
如果需要，可以通过更改 angle 添加动画。基于当前时间的变换中的变量。 SVG 变换使数学运算变得非常简单，因为您可以连接变换。
但是，我怀疑 3000 多颗行星能否以 60 fps 的速度使用 <svg> 制作动画。与当前的计算机。如果你想要一个流畅的动画，你可能想看看<canvas> .
编辑:它相当流畅，但对我来说不像 60 fps。 fiddle .
关于javascript - 使用一些数学可视化 JSON 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39232985/