«Повторение» массива цветов несколько раз на основе другого массива

Question

Я создаю приложение, в котором пользователь может выбрать набор данных, который затем будет отображаться на карте листов. Чтобы различать маркеры, каждому маркеру будет присвоен цвет, основанный на переменной. Данные имеют соответствующую легенду.

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

Я установил базовый массив с несколькими статическими цветами, что отлично подходит для небольшого набора данных. Однако, когда я добавляю больший набор данных, цвета «выбегают», конечно, как вы можете видеть ниже. Я увеличил количество цветов в правильной легенде, чтобы показать, что я хотел бы видеть.

То, что я хотел бы иметь, это эффективный способ «повторить» arrayKleur если arrayMetKetens больше, то массив цветов.

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);