根据来自 json 的数据用颜色填充 d3.js 地图

Question

对 d3 来说太新了，这是我第一个使用该库的项目。目前，我在根据数据用不同颜色填充地图时遇到问题。我在网上找到了很多示例，但它们并不适合我。

我所拥有的是一个带有这种格式数据的 JSON 文件

"Aska": {
    "opening_bal": 138000,
    "total_funds": 1030574000,
    "expenditure_wages": 796017000,
    "expenditure_materials": 234236000,
    "total_expenditure": 1030491000,
    "unspent_bal": 78000,
    "payment_due": 12780000
  },
  "Balasore": {
    "opening_bal": 4660000,
    "total_funds": 233869000,
    "expenditure_wages": 203883000,
    "expenditure_materials": 57571000,
    "total_expenditure": 262518000,
    "unspent_bal": 28658000,
    "payment_due": 2118000
  },

我可以使用 GeoJson 文件创建地图。这是地图的链接：https://mgnregs-d3.vercel.app/filter

我正在考虑使用初始类别“opening_bal”创建一个对象，例如：

{
  "Aska": 138000,
  "Balasore": 4660000
},

点击后，我会将类别更新为“total_funds”等，例如：

{
  "Aska": 1030574000,
  "Balasore": 233869000
},

但首先我需要可视化初始化第一个数据。我做不到。

这样的事情在某些项目上有效，但不适用于我的情况......

d3.json('data.json', function (d) {
    budget.d.properties.pc_name = d.properties.pc_name['opening_bal']
})

var color = d3
    .scaleThreshold()
    .domain(d3.range(2, 18))
    .range(d3.schemeBlues[6])

这里是 GitHub 上的 repo：https://github.com/PixeledCode/MGNREGS_D3

地图组件：https://github.com/PixeledCode/MGNREGS_D3/blob/main/src/components/Filter/Filter.js

data.json:https://github.com/PixeledCode/MGNREGS_D3/blob/main/src/assets/data.json

映射 GeoJson：https://github.com/PixeledCode/MGNREGS_D3/blob/main/src/assets/odihsa.js

感谢任何帮助。

Answer 1

你有一个如下形式的数据对象：

const data = {
  "Aska": 138000,
  "Balasore": 4660000,
  ...
},

查找对象的最小值和最大值：

const range = Object.values(data).reduce((r, v) => r ? 
  ({min: Math.min(r.min, v), max: Math.max(r.max, v}) :
  ({min: v, max: v})), null);

现在，您可以编写一个函数，将最小值和最大值之间的任何值转换为颜色。如果最小值的颜色是 green (0, 255, 0)，最大值的颜色是 blue (0, 0, 255)，则函数看起来像这样：

const colorUnit = 255 / (range.max - range.min);
const getColorByValue = val => {
  const delta = val - range.min;
  return `rgb(0, ${255 - delta * colorUnit}, ${delta * colorUnit})`;
};