Javascript 基于百分比的动态填充D3js地理地图

我是3Djs新手，今天我用JSON（TopoJSON）构建了一张英格兰地理地图，用作图表

我现在需要的是根据百分比（这是一项成就，比如你去过多少国家）动态地填充生成的SVG，但我找不到应该使用哪种技术来实现这一点

编辑：只使用一种颜色来填充地图。改变的是地图区域颜色填充的百分比（例如30%（已实现）红色70%白色（未实现），50%红色50%白色等）。（我的名声不允许我发布图片。）

这是我用来构建地图的代码

var width = 120,
height = 145;

var projection = d3.geo.albers()
    .center([0, 55.4])
    .rotate([4.4, 0])
    .parallels([50, 60])
    .scale(1200 * .6)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection)
    .pointRadius(2);

var svg = d3.select(".target-distribution").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("uk.json", function(error, uk) {
  svg.selectAll(".subunit")
      .data(topojson.feature(uk, uk.objects.subunits).features)
      .enter().append("path")
      .attr("class", function(d) { return "subunit " + d.id; })
      .attr("d", path);

  svg.append("path")
      .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; }))
      .attr("d", path)
      .attr("class", "subunit-boundary");

  svg.append("path")
      .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; }))
      .attr("d", path)
      .attr("class", "subunit-boundary IRL");

  svg.append("path")
      .datum(topojson.feature(uk, uk.objects.places))
      .attr("d", path)
      .attr("class", "place");

  svg.selectAll(".place-label")
      .data(topojson.feature(uk, uk.objects.places).features)
});

---

我为实现我的目标所做的：

克隆SVG映射（使用jQuery Clone（）方法）

将克隆覆盖在原始上（通过位置：绝对）

在克隆上使用CSS clip属性仅显示我需要的区域

---

请尝试从d3的创建者处查看此有用的示例：

这显示了一张地图，其中包含来自TopoJSON文件的地理数据和分别从.csv文件加载的人口数据，其中人口数据决定填充颜色：

---

什么颜色是100%？0%是什么颜色？你如何看待这些值之间的颜色变化？颜色总是一样的。让我们说红色。区别在于地图有多少部分是用红色填充的（30%的面积，60%的面积等等）。首先，你需要有信息来确定地图每个部分的颜色。Lars Kotthoff我已经有了它。它来自一个jsp页面，但如果愿意的话，我也可以通过javascript获得它。我要寻找的是通常用于动态填充SVG对象的技术（或方法或属性集）。