Основы Svg и привязки

Question

Любые подсказки, как я могу сделать это более простым, так что я могу легко обновить значения? Образец:

for (var i = 0; i < 10; i++) { 
var x = 40 * i; 
    for (var t = 0; t < 8; t++) { 
    var y = 40 * t, 
    rectBg = canvas.rect(x,y,30,30); 
    if (x === 0 && y == 160 || 
     .. 
     x == 360 && y == 280) { 
    rectBg.attr({ 
     fill: '#DF1279' 
    }); 
    } else if (x === 0 && y == 120 || 
      .. 
       x == 360 && y == 200) { 
     rectBg.attr({ 
     fill: '#F3B7D3' 
    }); 
    } else { 
    rectBg.attr({ 
     fill: '#e8e8e8' 
    }); 
    } 
}; 

};

http://codepen.io/ricnunes/pen/GEHpD

Answer 1

Успели сделать его работу. В конце концов, это было очень просто:

var canvas = Snap($(window).innerWidth() , 500), 
    squareSize = 30, 
    squareSpace = 10, 
    xSize = 10, 
    ySize = 8, 
    frontPosition = [4,5,5,3,4,3,5,3,2,2], 
    backPosition = [5,6,6,5,5,5,6,5,3,3]; 
for (var i = 0; i < xSize; i++) { 
var x = (squareSize + squareSpace) * i; 
    for (var t = 0; t < ySize; t++) { 
    var y = (squareSize + squareSpace) * t, 
    rectBg = canvas.rect(x,y,squareSize,squareSize);   
    if (y >= (ySize-frontPosition[i]) * (squareSize + squareSpace)) { 
     rectBg.attr({ 
     fill: '#DF1279' 
     }); 
    } else if (y >= (ySize-backPosition[i]) * (squareSize + squareSpace)) { 
     rectBg.attr({ 
     fill: 'pink' 
     }); 
     } 
    else { 
     rectBg.attr({ 
     fill: '#e8e8e8' 
     }); 
    } 
    } 
    }