approche différente pour éviter une trop grande imbrication des fonctions

Question

Je me demande s'il y a une meilleure façon de résoudre le problème suivant et empêcher le code d'obtenir illisible beacause trop de fonctions imbriquées:

J'utilise d3.js et jquery slider pour produire une carte de l'europe qui montre le chômage de chaque région. Le curseur est là pour basculer entre les années de 2005 à 2015. Sur chaque changement de curseur, je veux que l'europe.svg soit recolorée.

Jusqu'à présent, je résolu la question de la manière suivante:

var color = d3.scaleThreshold() 
    .domain([0, 1, 3, 5, 7, 10, 13, 16, 20, 25]) 
    .range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026", "#808080"]); 

d3.queue() 
    .defer(d3.json, "data/json/euRegions.json") 
    .defer(d3.csv, "data/csv/euUnemploymentRates.csv") 
    .await(initializeEUmap); 

function initializeEUmap(error, euRegionsJson, euUnemploymentcsv) { 
    if (error) throw error; 

    euRegionsJson.features.forEach(function(d) { 
    for (var i = 0; i <= 334; i += 1) { 
     if (d.properties.NUTS_ID == euUnemploymentcsv[i].Flag) { 
      for (var j = 2005; j <= 2015; j += 1) { 
       d.properties[j] = euUnemploymentcsv[i][j]; 
      } 
     } 
    } 
    }); 

    $('#slider').slider().bind('slidechange', function(event, ui) { 
    var sliderValue = $('#slider').slider("option", "value"); 
    svgEurope.selectAll(".euMap").remove(); 
    svgEurope.selectAll("path") 
     .data(euRegionsJson) 
     .enter().append("path") 
     .attr("cx", function(d, i) {return projection([d.longitude, d.latitude])[0];}) 
     .attr("cy", function(d, i) {return projection([d.longitude, d.latitude])[1];}) 
     .data(euRegionsJson.features) 
     .enter().append("path") 
     .attr("d", geoPath) 
     .attr("class", "euMap") 
     .attr("fill", function(d) {return color(d.properties[sliderValue]);}) 
     .style("stroke", "black") 
     .style("stroke-width", "0.4px"); 
}); 

Est-il vraiment la meilleure pratique pour envelopper tout l'intérieur de la fonction slidechange? Quelle serait votre approche?

Answer 1

Je voudrais refactoriser le rappel slidechange dans une déclaration de fonction, et le supprimer. Vous avez également utilisé certaines variables qui ne sont pas fournies dans votre code, mais transmettez simplement les variables dont vous avez besoin dans onSlideChange.

var color = d3.scaleThreshold() 
    .domain([0, 1, 3, 5, 7, 10, 13, 16, 20, 25]) 
    .range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026", "#808080"]); 

d3.queue() 
    .defer(d3.json, "data/json/euRegions.json") 
    .defer(d3.csv, "data/csv/euUnemploymentRates.csv") 
    .await(initializeEUmap); 

function initializeEUmap(error, euRegionsJson, euUnemploymentcsv) { 
    if (error) throw error; 

    euRegionsJson.features.forEach(function(d) { 
    for (var i = 0; i <= 334; i += 1) { 
     if (d.properties.NUTS_ID == euUnemploymentcsv[i].Flag) { 
      for (var j = 2005; j <= 2015; j += 1) { 
       d.properties[j] = euUnemploymentcsv[i][j]; 
      } 
     } 
    } 
    }); 

    $('#slider').slider().bind('slidechange', e => onSlideChange(e,euRegionsJson)); 

} 

function onSlideChange(event, euRegionsJson) { 
    var sliderValue = $('#slider').slider("option", "value"); 
    svgEurope.selectAll(".euMap").remove(); 
    svgEurope.selectAll("path") 
     .data(euRegionsJson) 
     .enter().append("path") 
     .attr("cx", function(d, i) {return projection([d.longitude, d.latitude])[0];}) 
     .attr("cy", function(d, i) {return projection([d.longitude, d.latitude])[1];}) 
     .data(euRegionsJson.features) 
     .enter().append("path") 
     .attr("d", geoPath) 
     .attr("class", "euMap") 
     .attr("fill", function(d) {return color(d.properties[sliderValue]);}) 
     .style("stroke", "black") 
     .style("stroke-width", "0.4px"); 
}