Question

我在d3的某些圈子上有一个过渡。过渡会将圆形显示出来，并使用其时间戳更新文本显示：

var component = this;
select(this.node).select("#circles").selectAll(".pin")
    .data(this.props.data)
    .enter()
    .append("circle", ".pin")
    .attr("r", 5/component.state.zoomScale)
    .style("fill", "#ff0000")
    .style("opacity", "0.0")
    .transition()
    .on("start", function(d, i) {
      if (i % component.props.multiplier == 0) {
        select("#timer").text(d.time);
      }
    })
    .style("opacity", "1.0")
    .delay(function(d, i) {return d.delay/component.props.multiplier;});

如果我的组件收到新数据，我想停止圆上的所有运行过渡，清除文本并删除圆：

var circles = select(this.node).select("#circles").selectAll(".pin");
if (!circles.empty()) {
  circles.interrupt();
  select("#timer").text(""); //This is my time display that I want to clear
  circles.remove();

虽然圆圈已被很好地删除，但文本在删除后重新出现，表明过渡实际上从未停止过。如何正确停止圈子中正在运行的过渡？我正在ReactJS中使用d3.js v4。

Answer 1

您必须将类设置为单独的类别，而不是通过append调用来设置。

您要打断的选择不会选择任何内容，该类别没有圆圈。

var component = this;
select(this.node).select("#circles").selectAll(".pin")
    .data(this.props.data)
    .enter()
    .append("circle")
    .attr("class", "pin")
    .attr("r", 5/component.state.zoomScale)
    .style("fill", "#ff0000")
    .style("opacity", "0.0")
    .transition()
    .on("start", function(d, i) {
      if (i % component.props.multiplier == 0) {
        select("#timer").text(d.time);
      }
    })
    .style("opacity", "1.0")
    .delay(function(d, i) {return d.delay/component.props.multiplier;});

尽管在选择时调用了中断，但仍无法删除d3过渡

1 个答案: