如何赋予数组的不同部分，不同的属性答案

【问题标题】：How to give different parts of an array, different attributes如何赋予数组的不同部分，不同的属性
【发布时间】：2019-07-03 08:57:26
【问题描述】：

我想为数组的不同对象赋予不同的属性，比如颜色和大小。

我已经在本准则的另一部分管理过一次。我制作了一个新数组，并为同名的组赋予了相同的颜色。但是现在我不能制作一个包含所有颜色的数组，因为我没有特定的对象。我希望所有小于 1500 的年份都是蓝色的。以及所有> 1500红色的东西。

var paper;
var paperWidth, paperHeight = 0;
var xPos, yPos, radius = 0;
init();

function init() {
  paper = Snap("#svgContainer");
for (i = 0; i < data.length; i++) {
    data[i].circle = paper.circle(0, 0, 1); 

  }
function showJahresZahlen() {
    for (var i = 0; i < data.length - 0; i++) {
      xPos = map(data[i].longitude, (0 - 180), 180, 0, paperWidth);
      yPos = paperHeight - map(data[i].latitude, (0 - 90), 90, 0, paperHeight);

//first approach
circleColor = lava;
      function lava() {
        if (data.lastEruption < 100) {
          circleColor = "blue"
        } else if (data.lastEruption > 1000 && data.lastEruption < 1500) {
          circleColor = "red"
       } else {

          circleColor = "orange"
        }
      }
   data[i].circle.animate({

        cx: xPos,
        cy: yPos,

// second approach
        fill: data.lastEruption < 1000 ? "red" : data.lastEruption > 1000 && data.lastEruption < 1500? "blue": "orange",
        opacity: 0.5,
        stroke: "none",
        r: 5,
      }, 50);
    };
  }

// example out of my array 
var data = [
{
    "lastEruption": 1000,
  },
{ "lastEruption": 250,}
....]

我没有任何错误，在最后一种方法中显示的颜色是橙色。但是为什么没有出现蓝色和红色呢？

【问题讨论】：

检查您的条件。在第一种方法中，您检查data.lastEruption < 100。另外，当data.lastEruption 是1000 时，它看起来会是橙色的。

标签： javascript arrays function colors attr

【解决方案1】：

function showJahresZahlen() {
    for (var i = 0; i < data.length - 0; i++) {
      xPos = map(data[i].longitude, (0 - 180), 180, 0, paperWidth);
      yPos = paperHeight - map(data[i].latitude, (0 - 90), 90, 0, paperHeight);


        if (data[i].lastEruption < 100) {
          var circleColor = "blue"
        } else if (data[i].lastEruption > 1000 && data.lastEruption < 1500) {
          var circleColor = "red"
        } else {
          var circleColor = "orange"
        }


      data[i].circle.animate({

        cx: xPos,
        cy: yPos,
        fill: circleColor,
      }, 2000);
    };

}

【讨论】：