Mag*_*Tun 1 maps animation d3.js
我已经制作了一张地图d3.js，现在我想依次为几个国家着色：
到目前为止我可以一次改变所有国家的颜色。我试着做我想做的事，.transition().delay(500)但没有成功。
到目前为止，这是我的代码：
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var w = 1000;
var h = 550;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
var path = d3.geoPath()
.projection(d3.geoMercator()
//.scale(0)
//.translate([200, 2100])
);
var countries_visited= ['Spain','France','Germany','Poland', 'Finland']
d3.json(
"https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json",
function (error, json) {
//draw svg lines of the boundries
svg.append("g")
.attr("class", "black")
.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr('fill', '#e7d8ad');;
d3.timeout(function() {
d3.selectAll('path')
//.transition().delay(500) //should color countries, one after the other
.attr('fill', colorCountry);
}, 500);
}
);
function colorCountry(country){
if (countries_visited.includes(country.properties.name)) {
return '#c8b98d';
} else { // why do I need a else (otherwise set to black
return '#e7d8ad';
};
};
</script>
</body>作为一个附带问题：为什么我需要一个 else 语句colorCountry？fill如果我不添加，为什么国家/地区会发生变化else？
为了不削弱 Xavier 的答案，您还可以通过使用函数（而不是增量）设置延迟来避免使用更 d3 惯用方法的循环：
d3.selectAll("path")
.filter(function(d) { return countries_visited.indexOf(d.properties.name) > -1 })
.transition()
.delay(function(d) { return countries_visited.indexOf(d.properties.name) * 500 + 1000; })
.attr("fill","#c8b98d");
这看起来像：
d3.selectAll("path")
.filter(function(d) { return countries_visited.indexOf(d.properties.name) > -1 })
.transition()
.delay(function(d) { return countries_visited.indexOf(d.properties.name) * 500 + 1000; })
.attr("fill","#c8b98d");