javascript - 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

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

要解决这个问题，您必须将高度设置为 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);
  });

更新 fiddle :https://jsfiddle.net/thatOneGuy/4u332kwp/1/