使用數據圖，我正在嘗試為每個部門創建一種顏色

Question

我正在使用數據映射 ( http://datamaps.github.io/ ) 並嘗試根據法國 map 中的 if 條件為每個具有間隔的部門制作顏色。

例如，如果 interval == "1-50" 為該區間內的所有部門制作紅色，並將其添加到

data: {
    "mydepartment1": {
      fillKey: "red",
    },
    "mydepartment2": {
      fillKey: "gt50",
    }
  }

這是我的 js：從“../data/departements-list.json”導入 departement_list；

var jsonData = JSON.parse(JSON.stringify(departement_list));
const dataValues = jsonData.map((data) => data.Departement);
const uniqueValues = [...new Set(dataValues)];

let interval,
nb_votes = [];
for (const valeur of uniqueValues) {
  nb_votes = dataValues.filter((v) => v == valeur).length;
  if (nb_votes <= 0) {
    interval = "defaultFill";
  } else if (nb_votes > 1 && nb_votes < 50) {
    interval = "1-50";
  } else if (nb_votes > 51 && nb_votes < 100) {
    interval = "51-100";
  } else if (nb_votes > 101 && nb_votes < 150) {
    interval = "101-150";
  } else if (nb_votes > 151 && nb_votes < 200) {
    interval = "151-200";
  } else if (nb_votes > 201 && nb_votes < 300) {
    interval = "201-300";
  } else if (nb_votes > 301 && nb_votes < 400) {
    interval = "301-400";
  } else {
    interval = "401-";
  }
}

var map = new Datamap({
  scope: "fra",
  element: document.getElementById("map-france"),
  responsive: true,
  fills: {
    defaultFill: "#EDE8D6",
    "1-50": "#F4F1E6",
    "51-100": "#EDE8D6",
    "101-150": "#E2DABF",
    "151-200": "#CEC191",
    "201-300": "#BCAE7C",
    "301-400": "#9D893E",
    "401-": "#827131",
  },
  data: {
    "mydepartment1": {
      fillKey: "101-150",
    },
    "mydepartment2": {
      fillKey: "151-200",
    }
  }
});

Answer 1

您好，不清楚您的代碼的用途，interval 似乎從未被使用過，只是在uniqueValues的每次迭代中重置

我查看了如何使用數據映射，看起來填充“鍵”對應於data參數中的fillKey

因此對於

data: {
    "mydepartment1": {
      fillKey: "red",
    },
    "mydepartment2": {
      fillKey: "gt50",
    }
  }

工作你需要

fills: {
    defaultFill: "#EDE8D6",
    "red": "#F4F1E6",
    "gt50": "#EDE8D6",
  },

我發現這篇博客文章更詳細地介紹了它。 希望這能讓你走上正確的道路