D3 transition height

Question

please tell me why transition() method in line 136 is only for attribute style and does not work for the attribute height.

state.selectAll("rect")
        .data(function (d) {
            return d.ages;
        })
        .enter().append("rect")
        .attr("width", x1.rangeBand())
        .attr("x", function (d) {
            return x1(d.name);
        })
        .attr("y", function (d) {
            return y(d.value);
        })
        .transition().delay(function (d, i){ return i * 300;}).duration(3300)
        .attr("height", function (d) {
            return height - y(d.value);
        })
        .style("fill", function (d) {
            return color(d.name);
        });

Example link https://jsfiddle.net/4u332kwp/

Answer 1

It is like this because if you don't provide a fill it defaults to black. So it then transitions from black to blue. Whereas you don't give it an initial height so it doesn't transition.

To solve this you would have to set height to 0 (or whatever you wish to start at) then transition. I have appended the function to a variable named rects so I can add the transition to that selection later :

var rects = state.selectAll("rect")
  .data(function(d) {
    return d.ages;
  })
  .enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) {
    return x1(d.name);
  })
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", 0);


rects.transition().delay(function(d, i) {
    return i * 300;
  }).duration(3300)
  .attr("height", function(d) {
    return height - y(d.value);
  })
  .style("fill", function(d) {
    return color(d.name);
  });

Updated fiddle : https://jsfiddle.net/thatOneGuy/4u332kwp/1/