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

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