D3トランジションの高さ

Question

なぜ私は、136行目のトランジション（）メソッドがアトリビュートスタイルのためだけであり、アトリビュートの高さでは機能しないのか教えてください。

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/