D3过渡高度

Question

请告诉我为什么第136行的transition（）方法仅适用于属性样式，而不适用于属性高度。

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);
        });

示例链接https://jsfiddle.net/4u332kwp/

Answer 1

之所以这样，是因为如果您不提供填充，则默认为黑色。 因此，它从黑色过渡到蓝色。 而您没有给它一个初始高度，因此它不会过渡。

为了解决这个问题，您必须将height设置为0（或您希望从此处开始的任何高度），然后过渡。 我已经将该函数附加到了一个名为rects的变量上，以便稍后可以将过渡添加到该选择中：

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);
  });

更新小提琴： https : //jsfiddle.net/thatOneGuy/4u332kwp/1/