javascript - 带有 d3.line 函数的 For 循环

Question

我在使用 d3.line 函数的 for 循环中遇到了奇怪的行为。 循环如下所示:

for (zzz = 0; zzz < 3; zzz++) {
    lines = d3.line()
        .x(function(d,i) { console.log(zzz); x([1,2,3]) })
        .y(function(d,i) { console.log(zzz); y([1,2,3]) });
}

通常情况下，我期望 console.log这个看起来像

0
1
2

相反，我得到了

3
3
3

我花了几天时间试图找出原因......有人可以帮忙吗？

Here is a jfiddle 。它只具有生成控制台输出的最低限度。

Answer 1

该 block :

for (zzz = 0; zzz < 3; zzz++) {
    lines = d3.line()
        .x(function(d,i) { console.log(zzz); x([1,2,3]) })
        .y(function(d,i) { console.log(zzz); y([1,2,3]) });
}

不记录任何内容。检查这个演示:

for (zzz = 0; zzz < 3; zzz++) {
  console.log("Outside d3.line, zzz is " + zzz);
  lines = d3.line()
      .x(function(d,i){console.log("Inside d3.line nothing is printed!");x([1,2,3]) })
      .y(function(d,i){console.log("Inside d3.line nothing is printed!");y([1,2,3]) });
}

<script src="https://d3js.org/d3.v4.min.js"></script>

原因是d3.line()没有被调用(因此，不会在控制台中打印任何内容)。 d3.line()仅当您实际附加路径时才调用(使用 lines )。到那时，for循环已完成并且 zzz是 3(如果您使用 let ，则它会是 2 )。

此外，您得到 3三次只是巧合，与for无关。循环从 0 到 2(循环三次)，但前提是您将具有三个值的数组传递给 lines在你的 fiddle 中:lines([1, 2, 3]) 。在下面的演示中，它将打印 zzz每个函数只需一次:

var svg = d3.select("body");
var x = d3.scaleLinear().range([0, 100]);
var y = d3.scaleLinear().range([100, 0]);

for (zzz = 0; zzz < 3; zzz++) {
  lines = d3.line()
  .x(function(d,i) { console.log("first console.log: " + zzz); x([1,2,3]) })
  .y(function(d,i) { console.log("second console.log: " + zzz); y([1,2,3]) });
}

svg.append("path").attr("d", lines([1]));

<script src="https://d3js.org/d3.v4.min.js"></script>

所以，简而言之，您只是定义 lines里面 for循环。