Question

我试图在for循环中绘制条形图，如：

1E

这个for循环绘制了四个条形图，我尝试通过鼠标事件向每个条形图添加文本。

一切正常，除了onmouseover部分，我不能将dex作为参数传递给函数，为什么？

Answer 1

我认为你可能会误解范围内的变量与函数声明的参数定义之间的区别。

行： .on("mouseover", function(d,dex) {//.. 为将在mouseover事件上执行的函数启动函数声明。您已经任意命名该函数dex的第二个参数，但这与您在for循环中定义的var dex无关。更重要的是，它特别覆盖了函数可以保存到var dex的任何引用。但很明显，mouseover事件不会执行你的函数并传递一个值，它将作为dex使用。

要解决，你应该创建第二个变量，将dex的值存储在其中，然后你可以将函数传递给没有dex参数的.on("mouseover",，但是对新变量进行闭包，或者将new变量绑定到当前函数作为dex参数。

Answer 2

从dex功能中删除mouseover参数。只需在鼠标悬停功能中使用dex变量就会给你7总是因为在完成for循环迭代后将调用鼠标悬停函数，并且范围内dex变量的值将在那时为7。

因此，可能的解决方法是将dex值添加为rect中的属性，并在mouseover函数中使用它。

var depthBar =svgbin.selectAll("rect"+dex)
       .data(bindata)
       .enter()
       .append("rect")
       .attr("dex",dex) //Set dex as an attribute
       ...............
       ...............
       .on("mouseover", function(d) {
          var dex = d3.select(this).attr("dex"); //Get attr dex
          ...............
          ...............
       });

d3.js onmouseover在for循环中

2 个答案: