d3 aktualisiert neue Elemente Übergang in

Question

ich ein Balkendiagramm, dass ich völlig in Ordnung, wie dies an Aktualisierung:

var bar=chart.selectAll(".bar") 
      .data(data); 
    bar.enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { if(scale(d.values.total)<0){return width/2+widthDateLabel;}else{return width/2-scale(d.values.total)-widthDateLabel;}}) 
      .attr("width", function(d) { return Math.abs(scale(d.values.total)); }) 
      .attr("height", barHeight - 1) 
      .attr("fill", function(d) { if(scale(d.values.total)<0){ return "DeepPink"}else{return "MediumSeaGreen"}}) 
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 
    bar.exit() 
    .transition().duration(750) 
    .attr("transform", function(d, i) { return "translate(0," + (i + 1) * barHeight + ")"; }) 
    .style("opacity", 0) 
    .remove(); 
    bar 
    .transition().duration(750) 
     .attr("height", barHeight - 1) 
     .attr("x", function(d) { if(scale(d.values.total)<0){return width/2+widthDateLabel;}else{return width/2-scale(d.values.total)-widthDateLabel;}}) 
     .attr("width", function(d) { return Math.abs(scale(d.values.total)); }) 
     .attr("fill", function(d) { if(scale(d.values.total)<0){ return "DeepPink"}else{return "MediumSeaGreen"}}) 
     .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

Update selbst völlig in Ordnung funktioniert. Übergang auch. Wenn neue Balken hinzugefügt werden, erscheinen sie sofort an der Stelle, an der sie erscheinen soll, und haben keinen Übergang (z. B. Änderung der Deckkraft oder Verzögerung, bevor sie erscheint). Gibt es eine Möglichkeit, zwischen neuen Datenübergängen und Datenübergängen zu unterscheiden? Es sieht ziemlich hässlich aus und ich kann nicht glauben, dass d3 so Dinge macht. Also muss es einen Workaround dafür geben. Vielen Dank im Voraus!

Answer 1

Dank @ ThisOneGuy, die den Hinweis über die Opazität gab. Ich begann zu verstehen, dass das "Setup" vor dem Übergang das Initial bedeutet, aber es betrifft nur die neu hinzugefügten Elemente im Update. also hier ist meine Lösung (ging ich für Opazitätsveränderung + neue Elemente von unten kommend):

var bar=chart.selectAll(".bar") 
      .data(data); 
    bar.enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { if(scale(d.values.total)<0){return width/2+widthDateLabel;}else{return width/2-scale(d.values.total)-widthDateLabel;}}) 
      .attr("width", function(d) { return Math.abs(scale(d.values.total)); }) 
      .attr("height", barHeight - 1) 
      .attr("opacity", 0) 
      .attr("fill", function(d) { if(scale(d.values.total)<0){ return "DeepPink"}else{return "MediumSeaGreen"}}) 
      .attr("transform", function(d, i) { return "translate(0," + (i+Math.abs(monthLengthDiff)) * (barHeight) + ")"; }); 
    bar.exit() 
    .transition().duration(750) 
    .attr("transform", function(d, i) { return "translate(0," + (i + 1) * barHeight + ")"; }) 
    .style("opacity", 0) 
    .remove(); 
    bar 
    .transition().duration(750) 
     .attr("height", barHeight - 1) 
     .attr("x", function(d) { if(scale(d.values.total)<0){return width/2+widthDateLabel;}else{return width/2-scale(d.values.total)-widthDateLabel;}}) 
     .attr("width", function(d) { return Math.abs(scale(d.values.total)); }) 
     .attr("fill", function(d) { if(scale(d.values.total)<0){ return "DeepPink"}else{return "MediumSeaGreen"}}) 
     .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }) 
     .attr("opacity", 1)