d3更新了新元素的过渡

Question

我有一个条形图，我正在像这样完美地更新：

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

更新本身工作正常。 过渡也。 刚添加新条时，它们会立即出现在应显示的位置，并且没有任何过渡（例如，不透明度更改或出现之前的延迟）。 有什么办法可以区分新数据转换和更新数据转换？ 看起来很丑，我不敢相信d3是这样做的。 因此，必须对此有一种解决方法。 提前致谢！

Answer 1

感谢@thisOneGuy给了有关不透明度的提示。 我开始理解“设置”是指过渡之前的初始，但它只会影响更新中新添加的元素。 所以这是我的解决方案（我去做不透明度更改+来自底部的新元素）：

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)