Question

我知道当涉及到D3时，你无法使用javascript循环转换事件。但是，您有什么理由知道为什么不能使用动态名称（例如动态路径名称）？出于某种原因，下面的工作没有成功（我所要做的就是让日本不断在地图上发光......）

请注意：动画的第一位有效，日本则变红。然后动画停止，即使控制台正确地产生＆＃34;＃Japan＆＃34;并循环到无限。

paz = "#Japan";
glowit(paz)

function glowit(paz){
console.log(paz);
d3.select(paz)
  .transition()
  .style("fill", "red")
  .duration(1000)
  .each("end", function(){
     d3.select(paz)
       .transition()
       .style("fill", "white")
       .duration(1000)
       .each("end", glowit("#" + this.id))
  });
}

亲切的问候 - 谢谢你， -G。

Answer 1

问题可能是您调用 glowit()而不是将该函数作为参数提供给each()。你需要将它包装在一个函数中：

function glowit(paz){
  console.log(paz);
  d3.select(paz)
    .transition()
    .style("fill", "red")
    .duration(1000)
    .each("end", function(){
       d3.select(paz)
         .transition()
         .style("fill", "white")
         .duration(1000)
         .each("end", function () {
            glowit("#" + this.id);
         });
    });
}

Answer 2

只是为了解释为什么@Joachim告诉你将glowit包装在一个匿名函数中，当你执行each("end", glowit(paz))时，你立即执行glowit并将结果传递给each }。但是将它包装在一个匿名函数中会使它成为each的参数。

例如，如果glowit没有参数，则可以简单地删除()，它不会立即执行。此代码具有相同的效果：

glowit();

function glowit(){
  d3.select("#Japan")
  .transition()
  .style("fill", "red")
  .duration(1000)
  .each("end", function(){
    d3.select("#Japan")
    .transition()
    .style("fill", "white")
    .duration(1000)
    .each("end", glowit);//without the parentheses
  });
};

测试它，你会看到。

D3：使用动态名称

2 个答案: