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)

d3更新了新的元素转换

1 个答案: