我刚开始学习编程,正在阅读 O'Reilly Interactive Data Visualization 书中的例子。
目前,我正在尝试将五年电动汽车的数据按州进行可视化。每个州的颜色根据该特定年份注册的电动汽车数量而变化。
问题:
每次我在下拉菜单中选择一个 year
,它都会在其下方创建另一个地图svg。如何使其重新渲染现有的地图svg上的数据呢?
背景:
我有全局变量来定义svg的尺寸。我还有两个函数:
drawMap
带有一个年份参数,构建svg,从csv加载数据到us_map.json
,并创建所有州的边界。clickEventMap
为每个年份按钮附加事件侦听器,然后调用drawMap
函数,传递与按钮上的年份相匹配的年份。最后,我调用drawMap(2013)
,以便页面默认显示2013年的数据,然后调用clickEventMap()
。
我已经尝试过的方法:
我在 d3 color.domain
方法之后使用 console.log(year)
,此时正确的年份存储在 year 变量中。
此外,如果我手动更改调用 drawMap()
时的参数,我可以成功地更改现有地图上呈现的数据。
我的代码:
var w = 1200;
var h = 800;
var barpadding = 1;
var drawMap = function(year) {
var svg = d3.select("body")
.append("svg")
.attr("height", h)
.attr("width", w);
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([1600]);
var path = d3.geo.path()
.projection(projection);
var color = d3.scale.quantize()
.range(["rgb(237, 248, 233)", "rgb(186, 228, 179)", "rgb(116,196,118)", "rgb(49, 163, 84)", "rgb(0, 109, 44)"]);
color.domain([
d3.min(data, function(d) {return d["electric_vehicles_" + year];}),
d3.max(data, function(d) { return d["electric_vehicles_" + year];})
]);
console.log(year);
d3.json("us-states.json", function(json) {
for (var i = 0; i < data.length; i ++) {
var dataState = data[i].state;
var dataValue = parseFloat(data[i]["electric_vehicles_" + year]);
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState === jsonState) {
json.features[j].properties.value = dataValue;
break;
}
}
}
var stateView = function() {
console.log("State clicked.");
location.href="/states/1";
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
var value = d.properties.value;
if (value) {
return color(value);
}
else {
return "#ccc";
}
})
.on("mouseover", function(d, i) {
d3.select(this)
.style("fill-opacity", 0.5);
})
.on("mouseout", function(d, i) {
d3.selectAll("path")
.style("fill-opacity", 1);
})
.on("click", function() {
stateView();
});
});
});
};
var clickEventMap = function() {
$("#map2013").on("click", function() {
// var year = 2013;
drawMap(2013);
});
$("#map2012").on("click", function() {
// var year = 2012;
drawMap(2012);
});
$("#map2011").on("click", function() {
// var year = 2011;
drawMap(2011);
});
$("#map2010").on("click", function() {
// var year = 2010;
drawMap(2010);
});
$("#map2009").on("click", function() {
// var year = 2009;
drawMap(2009);
});
};
drawMap(2013);
clickEventMap();
感谢您的反馈。