d3.js在for循环中的onmouseover

Question

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

            for (var dex=3;dex<=6;dex++){
        alert(dex);
        var depthBar =svgbin.selectAll("rect"+dex)
                       .data(bindata)
                       .enter()
                       .append("rect")
                       .attr("x", function(d) {
                            return xScale(d[0]);
                       })
                       .attr("y", function(d) {
                            d.push(dex)
                            return yupScale(accumDepth(d,3,dex));
                       })
                       .attr("width", function(d){
                            return binScale(d[1]);
                       })
                       .attr("height", function(d) {
                            return height-margin.bottom - yupScale(d[dex]);
                       })
                       .style("opacity", 0.8)
                       .attr("fill", barcolor[dex])
                       .attr("stroke","black")
                       .on("mouseover", function(d,dex) {
                           //Get this bar's x/y values, then augment for the tooltip
                            var xPosition =parseFloat(d3.select(this).attr("x")) + xLable.rangeBand();
                            var yPosition = parseFloat(d3.select(this).attr("y")) + height*1.5;
                            var start = d[0];
                            var end = d[0] + d[1];
                            var posvale = start + ".." + end;

                           //Update the tooltip position and value
                           d3.select("#tooltip")
                             .style("left", xPosition + "px")
                             .style("top", yPosition + "px")                        
                             .select("#value")
                             .text(dex);
                           d3.select("#tooltip")
                             .select("#title")
                             .text("Depth:");
                           d3.select("#tooltip")
                             .select("#posvalue")
                             .text(posvale);

                           //Show the tooltip
                           d3.select("#tooltip").classed("hidden", false);
                        })
                       .on("mouseout", function() {
                            //Hide the tooltip
                            d3.select("#tooltip").classed("hidden", true);  
                        }); 

    }

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

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

Answer 1

从dex函数中删除mouseover参数。简单地在mouseover函数中使用dex变量，始终会得到7，因为mouseover函数将在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
          ...............
          ...............
       });

Answer 2

我认为您可能对作用域中的变量和函数声明的参数定义之间的区别有误解。

行：.on("mouseover", function(d,dex) {//..开始对将在mouseover事件上执行的函数进行函数声明。您已经任意为该函数命名了dex的第二个参数，但这与您在for循环中定义的var dex无关。更重要的是，它专门覆盖了函数可能持有的对var dex的任何引用。但是很明显，mouseover事件不会执行您的函数并向它传递一个作为dex有用的值。

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