如何给数组的不同部分,不同的属性
How to give different parts of an array, different attributes
我想为数组的不同对象赋予不同的属性,例如颜色和大小。
我已经在Code的另一部分管理过一次了。我制作了一个新数组,并为同名的组赋予了相同的颜色。但是现在我不能制作一个包含所有颜色的数组,因为我没有特定的对象。我想让所有小于 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,}
....]
我没有任何错误,在最后一种方法中显示的颜色是橙色。但是为什么没有显示蓝色和红色?
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);
};
}
我想为数组的不同对象赋予不同的属性,例如颜色和大小。
我已经在Code的另一部分管理过一次了。我制作了一个新数组,并为同名的组赋予了相同的颜色。但是现在我不能制作一个包含所有颜色的数组,因为我没有特定的对象。我想让所有小于 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,}
....]
我没有任何错误,在最后一种方法中显示的颜色是橙色。但是为什么没有显示蓝色和红色?
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);
};
}