将for循环的值赋给函数d3

Question

我正在尝试将 for 循环的值赋给 d3 的点击函数。不幸的是没有任何成功。你们有人知道如何解决这个问题吗？这是有问题的代码：

function generateLegenda(catlist) {
for (z=0; z < catlist.length ; z++) {

    var legenda = d3.select("div.legendaCats")
                    .append("p")
                    .attr("class", "legendaItem")
                    .on("click", function(d, z){
                        blueLine = catlist[z];

                        // Determine if current line is visible
                        var active   = (d3.selectAll("#" + blueLine)).active ? false : true,
                          newOpacity = active ? 0.2 : 1;

                        // Hide or show the elements
                        d3.selectAll("#" + blueLine).style("opacity", newOpacity);
                        d3.selectAll("#" + blueLine).style("opacity", newOpacity);

                        // Update whether or not the elements are active
                        (d3.selectAll("#" + blueLine)).active = active;
                       });

Answer 1

我认为你的错误在于：

.on("click", function(d, z){
    blueLine = catlist[z];

在函数中定义 z 将赋予它与 for 迭代的值不同的含义。请尝试以下操作：

.on("click", function(d){
    blueLine = catlist[z];

Answer 2

正如 Giannis 提到的，函数的 z 参数覆盖了 for 循环的 z 参数。但是你必须使用一个闭包，在监听器中保存 z 的当前值，试试这个：

function generateLegenda(catlist) {

    for (z=0; z < catlist.length ; z++) {

        var legenda = d3.select("div.legendaCats")
          .append("p")
          .attr("class", "legendaItem")
          .on("click", (function(catIndex){
              return function(d){
                    blueLine = catlist[catIndex];

                    // Determine if current line is visible
                    var active   = (d3.selectAll("#" + blueLine)).active ? false : true,
                      newOpacity = active ? 0.2 : 1;

                    // Hide or show the elements
                    d3.selectAll("#" + blueLine).style("opacity", newOpacity);
                    d3.selectAll("#" + blueLine).style("opacity", newOpacity);

                    // Update whether or not the elements are active
                    (d3.selectAll("#" + blueLine)).active = active;
              };
         })(z));
    }
}

将for循环的值赋给函数d3

Give value of for loop to function d3

javascript

for-loop

d3.js