d3.js根据年份切换json地图

时间:2013-06-13 05:26:32

标签: json maps d3.js geojson

这是我在bl.ocks http://bl.ocks.org/textplusdata/f64f54dd8c1a0b632ed5

上的d3.js地图

在原始版本中,您可以使用箭头键或自动播放来循环显示年份数据,以显示随时间的变化。

我的问题是这个。如何根据年份加载不同的世界json文件? 1991年之前,旧苏联存在,但没有出现在数据中。

我已经上传了两个jsons,其中一个有旧的苏联,另一个没有。

// The map

var maptype;
if ( parseInt(year) < 1991) maptype = world_countriesold;
if ( parseInt(year) > 1991) maptype = world_countries;


var countries = d3.select("g#countries").empty() ?
chart.append("g").attr("id", "countries") : d3.select("g#countries"),
country = countries
.selectAll("path")
.data(maptype.features);
country
.enter()
.append("path")
.classed("country", true)
// changed { return d.id; } to { return d.ISO1AL3; } to look up 3-letter country code in c-shapes json
.attr("id", function(d,i) { return d.id; })
// changed { return d.properties.name; } to { return d.properties.CNTRY_NAME; } to return correct field in c-shapes json
.attr("title", function(d,i) { return d.properties.name; })
.attr("d", path);

我想我刚刚将“if”语句放在错误的位置,但我不知道如何强制触发......

1 个答案:

答案 0 :(得分:0)

在初始创建路径之后,您需要在传递新数据时更新现有路径。您的更新代码应该类似于

country = countries.selectAll("path")
  .data(maptype.features);

country.enter()
  .append("path");
country.classed("country", true)
  .attr("id", function(d,i) { return d.id; })
  .attr("title", function(d,i) { return d.properties.name; })
  .attr("d", path);
country.exit().remove();

每次更改maptype时,都需要调用此代码块,即从if语句块中调用。