Question

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

Answer 1

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

克隆SVG地图（使用jQuery clone（）方法）
覆盖原始克隆（通过位置：绝对）
使用克隆上的CSS剪辑属性仅显示我需要的区域。

Answer 2

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

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

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

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

2 个答案: