What is Null doing when it is inserted into an attribute function in d3?

Question

I ran into a strange argument I haven't seen. In this code, it puts 'null' into attribute and I guess what this null is doing is receive things when the function is being chained with others.

1) I want to ask you guys what the null is doing. ( where the null is in the code below)

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) I assume, the variable t is written to avoid repetitive transform argument. However, I don't get the order of the argument. Because I think, it should be written following this order.

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

However, according to the var t, select('path.area') comes after transition and duration and even after .each.

3) Last question, For the version 4 and 5 .each('end'...) needs to be .on('end'.... right?

Answer 1

Before anything else, please keep just one issue per question here at Stack Overflow.

Regarding the null , the API explains it:

A null value will remove the specified attribute.

That applies to other methods, such as style() .

In this example, the circle has a CSS color ("red"). The D3 code sets another color ("green"), and the null reverts to the original CSS color.

 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>