编辑：我还没有。我已经在这个问题上放了一笔赏金，因为我真的可以回答这个问题。我已经想到了代表不围绕中心旋转的行星的元素。因此，您可以跳过步骤1和步骤1。 2然后直奔3来试图帮助我。
ORIGINAL ：我正在开发一个有趣的小项目。它是一个太阳系，行星围绕太阳旋转。我认为这是一个三个重要步骤的模拟。
第一步：用8个行星创建一个功能性旋转太阳系。
第二步：创建一个函数，添加围绕同一个太阳旋转的新行星，点击一个按钮，其具体信息是随机的（即：距太阳的距离，行星的颜色） ，行星的大小等。）
我是第三步，我不想让事情变得随机。对我来说，第三步对我来说是最困难的，因为我对JSON没什么经验。我从NASA网站获得太阳系以外的所有系外行星的数据，我想用添加物体的功能将这些个体物体（行星）添加到模拟中。
我的问题是：我的代码如何在我的代码中查看您在JSON数组中看到的每条记录，作为一个放置的元素屏幕中心的黑色斑点（见小提琴）是一个随机的角度，所以它并不是全部对齐。最后，我希望有数以千计的小斑点代表屏幕上显示的行星，其中目前只能看到的黑色斑点是太阳。
这是因为在我的JSON文件中有成千上万个这样的行星，我想看到它们都与它们各自与太阳的距离和距离[pc]＆＃34;，它们各自的大小＆ ＃34;行星半径[木星半径]＆＃34;。当然，科学不需要准确，但它应该有所不同。例如，具有最大距离[pc]（parsec中的距离）的行星需要距离最远，但仍然能够在屏幕上看到，即使它只是一点点斑点。
现在我知道有一些数学涉及根据距离属性适当地定位每个行星，因为它们被列为parsec中的距离，一些转换方法是为了将它们全部放在同一个屏幕上，而它们＆ ＃39;仍然可见。
这是我的代码，但不是全部。要查看所有内容，请单击此代码下发布的链接。
//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行星示例，如果您的浏览器正在对您进行操作。
答案 0 :(得分：1)
让我试一试：
见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转换使得数学变得非常简单，因为您可以连接转换。
然而，我怀疑使用当前计算机<svg>可以以60 fps动画3000多个行星。如果您想要平滑的动画，可能需要查看<canvas>。
编辑：它非常流畅，但对我来说看起来不像是60 fps。 fiddle
答案 1 :(得分：0)
如果您需要每个单独的对象来执行操作，请使用for循环。
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;
for(var i=0;i<arr.length;i++){
distance= arr[i]["Distance [pc]"];
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.
}
}
答案 2 :(得分：0)
我不会为你编写代码，但我会给你提示如何。
第一个问题 - 适合屏幕：找到距离中心点最远的边缘，然后将所有距离转换为适合该距离，但要准确保持相对距离。为此，您需要3个输入数字以及您要找到的内容：
公式：
R'planet = D'planet / (R'max / D'max);
第二个问题 - 将行星放在屏幕上：你需要行星与太阳在屏幕上的距离（R＆＃39;行星 - 你从上一步开始），以及太阳的角度（0 - 360度 - 你说你可以做随机）。然后你可以像这样计算屏幕坐标：
公式：
X'planet = cos(A'planet) / R'planet;
Y'planet = sin(A'planet) / R'planet;
请记住，如果太阳位于[0,0]，这些坐标为真。因此，要将行星放置在屏幕上，您需要将X＆＃39;行星添加到X＆＃39;太阳，并将Y＆＃39行星添加到Y＆＃39;太阳。
第三个问题 - 屏幕上行星的大小：再次，类似于上面的第一个问题，只需确定屏幕上最大行星大小是什么，然后再划分实际再次按比例大小。
Radius'screen = Radius'actual / (Radius'actualmax / Radius'maxpx);
有很多方法可以绘制它，或者是svg，或者只是将div与行星图像放在一起并相应地调整大小。
这应该是它。