基于另一个数组多次“重复”一个颜色数组

Question

我正在构建一个应用程序，用户可以在其中选择一个数据集，然后该数据集将显示在 Leaflet 地图中。为了区分标记，每个标记将被赋予一种颜色，基于一个变量。数据具有匹配的图例。

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

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

我想要的是有效地“重复”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);
    }
}

获取颜色功能：

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

在一般情况下，您希望使用具有 lengthx的数组来定义具有 length 的数组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);