根據另一個陣列多次“重復”一個顏色陣列

Question

我正在構建一個應用程序，其中用戶可以選擇一個數據集，然后將其顯示在“傳單”地圖中。 為了區分標記，將基於變量為每個標記賦予顏色。 數據具有匹配的圖例。

現在，我只使用一個小的數據集進行測試和構建，但是我希望我的應用程序也能夠使用更大的數據集。

我用幾個靜態顏色設置了一個基本數組，這對於一個小的數據集來說很好。 但是，當我添加更大的數據集時，顏色當然會用完，如下所示。 我增加了正確圖例中的顏色數量，以顯示我希望看到的事情。

我想擁有的方法是，如果arrayMetKetens大於顏色數組，則可以有效地“重復” arrayKleur 。

arrayMetKetens是一個動態數組，根據選擇的數據集填充唯一值和更改。

顏色數組：

arrayKleur = ["#b15928", "#6a3d9a", "#ff7f00", "#e31a1c", "#33a02c", "#1f78b4", "#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f"];

生成圖例代碼：

function legenda(){
    var HTMLlegenda = '<h4>Legenda</h4>';

    // if arrayMetKetens is empty => default legenda text 
    if (arrayMetKetens.length == 0 ){
        HTMLlegenda += '<p>Selecteer een tabel in de "Advanced selection" tab om de legenda weer te geven</p>'

        $("#tab1").html(HTMLlegenda);
    }
    // if arrayMetKetens is filled => generate legenda
    else{

        $("#tab1").html(arrayMetKetens);

        // stuk code om van bovenstaande data een HTML tabel te maken
        for(ii = 0; ii < arrayMetKetens.length; ii++){

            HTMLlegenda += '<i id="background" style="background:'+arrayKleur[ii]+'">&nbsp;&nbsp;&nbsp;&nbsp;</i>'+arrayMetKetens[ii]+'</br>'
        }
        $("#tab1").html(HTMLlegenda);
    }
}

getColor函數：

function getArray(){
    var ketens = [];

    for(i=0;i < geojson_dataTable.features.length;i++){
       ketens = ketens.concat(geojson_dataTable.features[i].properties[featureVoorSorteer])
    }
    window.arrayMetKetens = jQuery.unique( ketens );
}

function getColor(keten) {
    var i = window.arrayMetKetens.indexOf(keten);
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
}

Answer 1

通常，您想使用長度為x的數組來定義長度為y的數組。 您可以使用模除來循環遍歷原始數組的索引。

function repeatFor(arr, size) {
  var newArr = new Array(size);

  for(var i = 0; i < size; i++) {
    newArr[i] = arr[i % i.length];
  }

  return newArr;
}

然后使用它創建一個根據現有顏色數組定義的新數組。

var kleurs = ["#b15928", "#6a3d9a", "#ff7f00", "#e31a1c", "#33a02c", "#1f78b4", "#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f"];

var arrayKleur = repeatFor(kleurs, arrayMetKetens.length);