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

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

D3过渡高度

1 个答案: