0

我是 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)
});
4

2 回答 2

0

尝试从 d3 的创建者那里查看这个有用的示例：

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

http://bl.ocks.org/mbostock/4060606

于 2014-02-05T10:47:40.293 回答
0

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

  1. 克隆 SVG 地图（使用 jQuery clone() 方法）
  2. 将克隆覆盖在原件上（通过位置：绝对）
  3. 使用克隆上的 CSS 剪辑属性仅显示我需要的区域。
于 2013-10-29T19:05:58.070 回答