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?

Regarding your second question, the answer is here: github.com/d3/d3-transition#transition_select. For the third, the answer is yes. — Gerardo Furtado

Gerardo Furtado Gerardo Furtado · Accepted Answer · 2020-03-29T06:13:04

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>

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

1 Answers