javascript - "Repeating"一个颜色数组多次基于另一个数组

Question

我正在构建一个应用程序，其中用户可以选择一个数据集，然后该数据集将显示在传单 map 中。为了区分标记，每个标记将根据变量指定一种颜色。数据有匹配的图例。

目前，我只使用一个小数据集进行测试和构建，但我希望我的应用程序也能够处理更大的数据集。

我设置了一个带有几个静态颜色的基本数组，这对于小型数据集来说很好。然而，当我添加更大的数据集时，颜色当然会“用完”，如下所示。我增加了右侧图例中的颜色数量，以显示我希望看到的情况。

我想要的是，如果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);