点击清除并更新svg [英] Clearing and updating svg on click

问题描述

在bl.ocks 此处中，我试图分配一个单击按钮，该按钮是:

From the bl.ocks here, I am attempting to assign an on-click button that:

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

即使它在同一视觉上，也会删除并重新加载同一视觉.找到了我希望获得的过渡

Even if it is on the same visual, it will remove and reload the same one. The transition I am hoping to get is found here but triggered with a click rather than a random interval.

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

I have tried a bunch of different ways without much results, my current attempt is to remove the current rects before calling my squared function like below:

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

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

之前我认为我需要更新两次，答案此处(我之前的问题)解决了上面bl.ocks的返回到0的部分(也是创建者)，但是我似乎无法绕过如何调用2个不同的函数先清除然后更新的想法带有按钮点击事件.

Earlier I thought what I needed was to update twice, the answer here (my earlier question) addressed the part where it goes back to 0 (also the creator) of the bl.ocks above, but I cannot seem to wrap my head around how to call 2 different functions to clear first and then update with a button click event.

推荐答案

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

You can implement the remove function as follows:

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等应用所需的延迟时间的过渡.

cellUpdate is the selection of the cells that you want to remove. The length can be retrieved from the number of data elements or the number of nodes in the group (for the example data() was used). After the selection is retrieved you can apply the desired transition with delayed duration on it width, opacity etc.

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

Here is a sample block that allows you to achieve the desired goal: https://blockbuilder.org/cstefanache/e3110f130394eb71b9adfb5060ef2b78

这篇关于点击清除并更新svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！