javascript - 使用一些数学可视化 JSON 元素

Question

编辑:我还没有到那儿。我对这个问题悬赏了，因为我真的可以解决这个问题。我用代表不围绕中心旋转的行星的元素的想法来凑合。因此，您可以跳过第 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 行星的示例。

Answer 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 变换使数学运算变得非常简单，因为您可以连接变换。

但是，我怀疑 3000 多颗行星能否以 60 fps 的速度使用 <svg> 制作动画。与当前的计算机。如果你想要一个流畅的动画，你可能想看看<canvas> .

编辑:它相当流畅，但对我来说不像 60 fps。 fiddle .