Animation D3.js映射：逐个更改路径的颜色

我已经用d3.js制作了一张地图，现在我想给几个国家一个接一个地涂上颜色：

在1秒钟内，我希望西班牙是红色， 在1.5秒时，法国应该是红色的，西班牙应该保持红色 在2秒时，德国应该是红色的，西班牙和法国应该保持红色 等等 到目前为止，我可以一次改变所有国家的颜色。我试着做我想做的事，试一下。转换。延迟500，但没有成功

这是我目前的代码：

var w=1000； var h=550； var svg=d3.selectbody.appendsvg .宽度，w .高度，h； var path=d3.geoPath .投影式3.地质测量仪 //.scale0 //.翻译[2002100] ; 您访问的var国家=[“西班牙”、“法国”、“德国”、“波兰”、“芬兰”] d3.json https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json, 函数错误，json{ //绘制边界线 svg.appendg 一等，黑色 .选择所有路径 .datajson.features 进来 .appendpath .attrd，路径 .attr'fill'，'e7d8ad'；； d3.timeoutfunction{ d3.选择所有“路径” //.transition.delay500//应逐个为国家/地区着色 .attr'fill'，颜色国家/地区； }, 500; } ; 国家职能{ 如果访问了国家/地区。includecountry.properties.name{ 返回“c8b98d”； }else{//为什么我需要将else设置为黑色 返回'e7d8ad'； }; };

---

下面是您代码的一个稍加修改的版本，它逐个显示访问过的国家：

var w=1000； var h=550； var svg=d3.selectbody.appendsvg.attrwidth，w.attrheight，h； var path=d3.geoPath.projectiond3.geoMercator； 所访问的var国家=[‘西班牙’、‘法国’、‘德国’、‘波兰’、‘芬兰’]； d3.json https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json, 函数错误，json{ svg.appendg 一等，黑色 .选择所有路径 .datajson.features 进来 .appendpath .attrid，函数d{return d.properties.name；} .attrd，路径 .attr'fill'，'e7d8ad'； 无功延迟=1000； 访问的国家/地区。每个国家=>{ d3.选择全部+国家/地区 .过渡 .attr'fill'，'c8b98d'； 延迟+=500； }; } ;

---

下面是您代码的一个稍加修改的版本，它逐个显示访问过的国家：

var w=1000； var h=550； var svg=d3.selectbody.appendsvg.attrwidth，w.attrheight，h； var path=d3.geoPath.projectiond3.geoMercator； 所访问的var国家=[‘西班牙’、‘法国’、‘德国’、‘波兰’、‘芬兰’]； d3.json https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json, 函数错误，json{ svg.appendg 一等，黑色 .选择所有路径 .datajson.features 进来 .appendpath .attrid，函数d{return d.properties.name；} .attrd，路径 .attr'fill'，'e7d8ad'； 无功延迟=1000； 访问的国家/地区。每个国家=>{ d3.选择全部+国家/地区 .过渡 .attr'fill'，'c8b98d'； 延迟+=500； }; } ;

---

与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");

这看起来像：

var w=1000； var h=550； var svg=d3.selectbody.appendsvg.attrwidth，w.attrheight，h； var path=d3.geoPath.projectiond3.geoMercator； 所访问的var国家=[‘西班牙’、‘法国’、‘德国’、‘波兰’、‘芬兰’]； d3.json https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json, 函数错误，json{ svg.appendg 一等，黑色 .选择所有路径 .datajson.features 进来 .appendpath .attrid，函数d{return d.properties.name；} .attrd，路径 .attr'fill'，'e7d8ad'； d3.选择所有路径 .FilterFunction{return countries\u visted.indexOfd.properties.name>-1} 过渡 .delayfunctiond{return countries_visted.indexOfd.properties.name*500+1000；} .attrfill，c8b98d； };

---

与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");

这看起来像：

var w=1000； var h=550； var svg=d3.selectbody.appendsvg.attrwidth，w.attrheight，h； var path=d3.geoPath.projectiond3.geoMercator； 您访问的var国家=[“西班牙”、“法国”、“德国”、“波兰”、“芬兰”] ; d3.json https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json, 函数错误，json{ svg.appendg 一等，黑色 .选择所有路径 .datajson.features 进来 .appendpath .attrid，函数d{return d.properties.name；} .attrd，路径 .attr'fill'，'e7d8ad'； d3.选择所有路径 .FilterFunction{return countries\u visted.indexOfd.properties.name>-1} 过渡 .delayfunctiond{return countries_visted.indexOfd.properties.name*500+1000；} .attrfill，c8b98d； };

---

谢谢你的帮助！我添加了一个到json的链接。我知道填充设置为默认，但为什么我的函数colorCountry删除了添加路径时设置的填充？为什么不记得填充？因为函数将返回未定义的国家/地区（不属于列表的一部分），因此这是未定义的，而不是appliedOk的初始颜色，我明白了！谢谢你！除了使用else语句之外，没有其他方法了？在这种情况下，我看不到可行的简单替代方案。好吧，我会保留它的！谢谢你的帮助！我添加了一个到json的链接。我知道填充设置为默认，但为什么我的函数colorCountry删除了添加路径时设置的填充？为什么不记得填充？因为函数将返回未定义的国家/地区（不属于列表的一部分），因此这是未定义的，而不是appliedOk的初始颜色，我明白了！谢谢你！除了使用else语句之外，没有其他方法了？在这种情况下，我看不到可行的简单替代方案。好吧，我会保留它的！谢谢你！谢谢你！那是一种有趣的红色！那是一种有趣的红色！