当 Null 插入到 d3 中的属性函数时，它在做什么？

Question

我遇到了一个我从未见过的奇怪争论。 在这段代码中，它将 'null' 放入属性中，我猜这个 null 的作用是在函数与其他函数链接时接收事物。

1) 我想问你们 null 在做什么。 （其中 null 在下面的代码中）

var t = svg.selectAll(".symbol").transition()
      .duration(duration)
      .attr("transform", "translate(0,0)")
      .each("end", function() { d3.select(this).attr("transform", null); });

  t.select("path.area")
      .attr("d", function(d) { return area(d.values); });

  t.select("path.line")
      .style("stroke-opacity", function(d, i) { return i < 3 ? 1e-6 : 1; })
      .attr("d", function(d) { return line(d.values); });

  t.select("text")
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; });

  setTimeout(streamgraph, duration + delay);

2）我假设，写入变量 t 是为了避免重复的变换参数。 但是，我没有得到论证的顺序。 因为我觉得，应该是按照这个顺序写的。

svg.selectAll('.symbol').select('path.area').attr('d',function(d){return area(d.values);}) .transition().duration(duration)。 attr('transform','translate(0,0)')....

然而，根据 var t， select('path.area') 出现在过渡和持续时间之后，甚至在 .each 之后。

3）最后一个问题，对于版本 4 和 5 .each('end'...) 需要是 .on('end'.... 对吗？

Answer 1

首先，请在 Stack Overflow 上为每个问题保留一个问题。

关于null ， API解释了它：

空值将删除指定的属性。

这适用于其他方法，例如style() 。

在此示例中，圆圈具有 CSS 颜色（“红色”）。 D3 代码设置了另一种颜色（“绿色”），而null将恢复为原始 CSS 颜色。

 const circle = d3.select("circle"); let i = 0; setInterval(function() { circle.style("fill", (++i) % 2 ? "green" : null); }, 1000)

 circle { fill: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg> <circle r="50" cx="100" cy="75"></circle> </svg>