如何根据如下所示的 JSON 数据向代码片段中的以下恒星系统添加新元素(我指的是行星):

        [{
           "rowid": 1,
           "Radius size": 3 ,
           "Distance": 110 pixels,
        },
         {
           "rowid": 2,
           "Size": 2.5,
           "Distance": 120 pixels,
        }]

每一行 ID 都是它自己的行星，具有自己的大小和位置。该距离当然基于行星与位于页面中心的太阳元素的距离。每个行星的距离需要处于不同的 Angular ，否则它们都会完美排列(不现实)。关于如何实现这一目标的任何想法？

var ball = {};

function makeBall(spec) {
  // Create the element
  var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  // Set its various attributes
  ["id", "cx", "cy", "r", "class"].forEach(function(attrName) {
    if (spec.element[attrName]) {
      circle.setAttribute(attrName, spec.element[attrName]);
    }
  });
  // Add it to the sun
  document.getElementById("Sun2").appendChild(circle);
  // Remember its animation settings in `ball`
  ball[spec.element.id] = spec.animation;
}

function addObject() {
  // Create a spec to use with makeBall from the fields
  var spec = {
    element: {
      id: document.getElementById("new-id").value,
      class: document.getElementById("new-class").value,
      r: parseFloat(document.getElementById("new-r").value)
    },
    animation: {
      speed: 2,
      spin: 30,
      side: 40
    }
  };
  // Some minimal validation
  if (!spec.element.id || !spec.element.r || !spec.animation.speed || !spec.animation.spin || isNaN(spec.animation.side)) {
    alert("Need all values to add a ball");
  } else if (ball[spec.element.id]) {
    alert("There is already a ball '" + spec.element.id + "'");
  } else {
    // Do it!
    makeBall(spec);
  }
}

function rotation(coorX, coorY, object) {
  object.side += (1.0 / object.speed);
  var ang = object.side * 2.0 * Math.PI / 180.0;
  var r = object.spin;

  return {
    x: Math.cos(ang) * r - Math.sin(ang) * r + coorX,
    y: Math.sin(ang) * r + Math.cos(ang) * r + coorY
  };
}

function rotationball(circle) {
  var x, y, x_black, y_black, e, newpos, black;

  // We always rotate around black
  black = document.getElementById("black");
  
  // Get this circle and update its position
  e = document.getElementById(circle);
  x_black = parseFloat(black.getAttribute("cx"));
  y_black = parseFloat(black.getAttribute("cy"));
  newpos = rotation(x_black, y_black, ball[circle]);

  e.setAttribute("cx", newpos.x);
  e.setAttribute("cy", newpos.y);
}

function animate() {
  Object.keys(ball).forEach(function(id) {
    rotationball(id);
  });
}

var animateInterval = setInterval(animate, 1000 / 60);

.st0 {
  fill: yellow;
}

.st1 {
  fill: orange;
}

<div>Add ball:
  <label>
    ID: <input type="text" id="new-id" value="newball">
  </label>
  <label>
    R: <input type="text" id="new-r" value="10">
  </label>
  <label>
    Speed: <input type="text" id="new-speed" value="1.2">
  </label>
  <label>
    Spin: <input type="text" id="new-spin" value="80">
  </label>
  <label>
    Side: <input type="text" id="new-side" value="0.0">
  </label>
  <label>
    Class: <input type="text" id="new-class" value="st1">
  </label>
  <button type="button" onclick="addObject()">
    Make Ball
  </button>
</div>

<div class="spinning">
  <svg xmlns="http://www.w3.org/2000/svg" id="solly" viewBox="0 0 1000 600">
    <g id="Sun2">
      <circle id="black" class="st0" cx="500" cy="300.8" r="10" />
    </g>
  </svg>
</div>

编辑: 以下是两个记录的原始示例。如您所见，它提供了更多但多余的属性。我真正需要的是每条记录的大小(行星半径 [木星半径] 和距离(距离 [pc])。距离需要转换为像素，大小比较棘手。

     [{
       "rowid": 1,
       "Host name": "TrES-3",
       "Number of Planets in System": 1,
       "Planet Mass or M*sin(i)[Jupiter mass]": 1.91,
       "Planet Radius [Jupiter radii]": 1.336,
       "Planet Density [g": {
          "cm**3]": 0.994
       },
       "Distance [pc]": 228,
       "Effective Temperature [K]": 5650,
       "Date of Last Update": "5/14/2014"
    },
     {
       "rowid": 2,
       "Host name": "UZ For",
       "Number of Planets in System": 2,
       "Planet Mass or M*sin(i)[Jupiter mass]": 6.3,
       "Planet Radius [Jupiter radii]": null,
       "Planet Density [g": {
          "cm**3]": null
       },
       "Distance [pc]": null,
       "Effective Temperature [K]": null,
       "Date of Last Update": "5/14/2014"
    }]

最佳答案

其实很简单:

如果您通读 HTML，您会注意到单击“制作球”按钮将调用 addObject()。所以你去检查 JS 代码中的那个函数。 addObject() 只是将输入字段中的值解析为一个名为 spec 的对象，然后调用 makeBall(spec)。

您需要做的是为每个 JSON 数据的 makeBall 函数提供完全相同的数据对象规范。

function addObjectsFromJson(json){
    // using try catch block because JSON.parse will throw an error if the json is malformed
    try{
        var array = JSON.parse(json);
        for(var i = 0; i < array.length; i++){
            var planet = array[i];
            // create a spec to use with makeBall from the json
            var spec = {
                element: {
                    id: planet.rowid,
                    // you don't provide a style class in your json yet, using yellow as default
                    class: 'st0',
                    // your json must have a standard property for radius,
                    // currently you have "Radius size" (is wrong since
                    // properties cannot have spaces) and "Size"
                    r: planet["Planet Radius [Jupiter radii]"]
                },
                animation: {
                    speed: 2,
                    spin: 30,
                    side: planet["Distance [pc]"]
                }
            };
            makeBall(spec);
        }
    }catch(e){
        console.log('error: ' + e);
    }
}

虽然我没有在 makeBall() 函数中看到用于添加距离的属性。

使用 jQuery 通过 ajax 处理 JSON:

// assuming your local server runs on port 8080
$.getJSON('localhost:8080/path/to/your/file', function (json) {
    // since we use getJSON, it is already parsed and a javascript object
    // additional parsing inside the addObjectsFromJson function is not necassary
    // and would throw an error
    addObjectsFromJson(json);
});

function addObjectsFromJson(json) {
    for (var i = 0; i < json.length; i++) {
        var planet = json[i];
        // create a spec to use with makeBall from the json
        var spec = {
            element: {
                id: planet.rowid,
                // you don't provide a style class in your json yet, using yellow as default
                class: 'st0',
                // your json must have a standard property for radius,
                // currently you have "Radius size" (is wrong since properties cannot have spaces) and "Size"
                    r: planet["Planet Radius [Jupiter radii]"]
                },
                animation: {
                    speed: 2,
                    spin: 30,
                    side: planet["Distance [pc]"]
        };
        makeBall(spec);
    }
}

关于javascript - 为每个 JSON 数据记录添加对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39243864/