Question

我正在尝试从bl.ocks here中分配一个单击按钮，该按钮是：

希望通过平滑过渡来删除当前形状。
取决于按钮的单击，返回选定的视觉效果。

即使它在同一视觉上，也会删除并重新加载同一视觉。我希望获得的过渡是here，但是通过单击而不是随机间隔触发的。

我尝试了多种方法，但没有太大结果，我目前的尝试是在调用remove函数之前，先rects当前squared，如下所示：

function remove(){
  d3.selectAll("rect").transition().remove();
};

d3.selectAll(".button1").on("click", function animate(){
          option = +this.value;
          remove();
          square(data[option]);
          console.log('b');
                });

之前我以为我需要更新两次，答案here（我之前的问题）解决了上面bl.ocks的返回到0（也是创建者）的部分，但是我不能似乎缠住了如何调用两个不同的函数以首先清除然后通过按钮单击事件进行更新的想法。

Answer 1

您可以按以下方式实现删除功能：

function remove() {
  var cellUpdate = cell.selectAll("rect")
  const length = cell.selectAll("rect").data().length

  var cellExit = cellUpdate.transition()
    .delay(function(d, i) { return (length - i) * 7; })
    .duration(updateDuration)
    .attr("width", 0)
    .remove();
}

cellUpdate是您要删除的单元格的选择。可以从数据元素的数量或组中节点的数量中检索length（例如使用data()的示例）。检索到选择后，您可以在width，opacity等上应用所需的延迟时间的过渡。

以下是一个示例块，可让您实现所需的目标：https://blockbuilder.org/cstefanache/e3110f130394eb71b9adfb5060ef2b78

点击并清除和更新svg

1 个答案: