Как дать разные части массива, разные атрибуты - PullRequest
Новая
       19

Как дать разные части массива, разные атрибуты

0 голосов
/ 03 июля 2019

Я хочу дать разным объектам массива разные атрибуты, такие как цвет и размер.

Я уже управлял этим один раз в другой части Кодекса.Я сделал новый массив и дал группам с одинаковым именем одинаковый цвет.Но теперь я не могу создать массив, который включает все цвета, потому что у меня нет определенного объекта.Я хочу, чтобы все годы <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,}
....]

У меня нет ошибок, и при последнем подходе цвет, который показывался, был оранжевый.Но почему синий и красный не появляются?

1 Ответ

0 голосов
/ 03 июля 2019 
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);
    };

}

...