Question

我想知道是否有更好的方法来解决以下问题，并防止代码因嵌套函数太多而无法读取：

我使用d3.js和jquery滑块生成欧洲地图，显示每个地区的失业率。滑块可以在2005年到2015年之间切换。在每个滑块更改时，我希望euro.svg重新着色。

到目前为止，我解决了以下问题：

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

将所有内容包装在slidechange函数中是否真的是最佳做法？你的方法是什么？

Answer 1

我会将slidechange回调重构为函数声明，并将其删除。您还使用了代码中未提供的一些变量，但只需将您需要的任何变量传递到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");
}

防止功能嵌套过多的不同方法

1 个答案: