我正在尝试更新同一个 div 中的 4 个制图。
首先,我创建了 4 个原始地图,每个地图都有自己的 svg,如下所示:
function makeMaps(data){
var mapsWrapper = d3.select('#maps');
data.forEach(function(topoJSON,i){
var quantize = d3.scale.quantize()
.domain([0, 1600000])
.range(d3.range(5).map(function(i) { return "q" + i; }));
var layer = Object.keys(topoJSON.objects)[0]
var svg = mapsWrapper.append('svg')
.attr("class","mapa")
.attr({
width: "350px",
height: "350px"
});
var muns = svg.append("g")
.attr("class", "muns")
.attr("id",layer)
.selectAll("path");
var geometry = topoJSON.objects[layer].geometries;
var carto = cartos[i]
var features = carto.features(topoJSON, geometry),
path = d3.geo.path()
.projection(projections[i]);
muns.data(features)
.enter()
.append("path")
.attr("class", function(d) {
return quantize(d.properties['POB1']);
})
.attr("d", path);
});
}
这部分效果很好,并创建了 4 个地图。在此之后,我想用 Cartogram.js 计算的路径更新每个地图中的路径。问题是我无法获取每个地图中的路径数据,这就是我想要做的:
...some code to calculate cartogram values
var cartograms = d3.selectAll(".mapa").selectAll("g").selectAll("path")
cartograms.forEach(function(region,i){
region.data(carto_features[i])
.select("title")
.text(function (d) {
return d.properties.nom_mun+ ': '+d.properties[year];
});
在cartograms
我得到一个嵌套选择:每个地图的路径数组,这是我虽然需要的,但在里面forEach
我得到错误 region.data() is not a function。每个区域都是一个路径数组,每个路径都有一个数据属性。我尝试了几种选择路径的方法都无济于事,现在我有点迷路了。谢谢你的帮助