D3 Übergangshöhe

Question

Bitte sagen Sie mir, warum die Methode transition() in Zeile 136 nur für den Attributstil und nicht für die Attributhöhe funktioniert.

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

Beispiel Link https://jsfiddle.net/4u332kwp/

Answer 1

Es ist dies wie denn wenn man auf Schwarz eine Füllung wird standardmäßig nicht liefern. Es wechselt dann von Schwarz zu Blau. Während Sie es nicht eine Anfangshöhe geben, so dass es nicht übergeht.

Um dies zu lösen, müssten Sie Höhe auf 0 (oder was auch immer Sie beginnen möchten) Höhe und dann Übergang einstellen. Ich habe die Funktion einer rects so genannte Variable angehängt ich den Übergang zu dieser Auswahl später hinzufügen:

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

Aktualisiert Geige: https://jsfiddle.net/thatOneGuy/4u332kwp/1/