且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

点击清除并更新svg

更新时间:2023-12-05 13:30:04

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

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()的示例).检索到选择后,您可以在其上按widthopacity等应用所需的延迟时间的过渡.

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