Question

这是我的bl.ock：https://bl.ocks.org/JulienAssouline/94dfdd391b16b47cff862a4708515dc6

如果单击PE，然后单击SUMMERSIDE，则会发生过渡。如果您不等待该过渡完成并单击CHARLOTTETOWN，则其他行将被删除，但是过渡的.on("end")部分仍会继续，导致我追加的文本最终在下一个过渡中再次出现。

我在console.log(this)函数中是.on("end")，因此您可以看到发生了什么。

我想知道的是，是否可以中断转换然后重新启动？

我可以通过以下方式中断转换：

if(counter == 0){ d3.selectAll("path").interrupt() }

.each循环开始时的

。但是，然后我找不到重新启动它的方法。

如果不可能的话，还有解决这个问题的更好方法吗？

这是过渡代码的关键

var counter = 0;


lines_transition.each(function(path, index){



var line_transitions = d3.select(this)
      .attr("id", function(d) {
        return d.values[0].Annual
      })
      .transition()
      .delay(index * 300)
      .duration(320)
      .style("opacity",1)
      .style("stroke-width", "2px")
      .transition()
      .duration(200)
      .style("stroke", "lightgrey")
      .style("opacity", 0.3)



     line_transitions.on("end", function(d, i){

      console.log(counter)

    console.log(this)

    if (first == true) {
     nextBiggest = d.values[0].Annual
     first = false
    }


    if (nextBiggest < d.values[0].Annual) {
      nextBiggest = d.values[0].Annual
      if (nextBiggest == d.values[0].Annual) {

       d3.select(this).style("stroke", "red").style("opacity", 1).style("stroke-width", "2px").style("stroke-dasharray", "2,2").raise()


         var line_color= this.style.stroke

          d3.selectAll(".new_record").remove()

        var record_text = g.append("text")
         .attr("x", width + 5)
         .attr("y", yScale(d.values[d.values.length-1].Temperature))
         .text(d.values[d.values.length-1].Year + " new record")
         .attr("class", "new_record")
         .attr("id", d.values[d.values.length-1].Year)

      }
    }

    var birthyear = document.getElementById("birthyear").value

    if (d.key == birthyear) {
      d3.select(this).style("stroke", "red").style("opacity", 1).style("stroke-width", "2px").style("stroke-dasharray", "2,2")

      g.append("text")
      .attr("x", width + 5)
      .attr("y", yScale(d.values[d.values.length-1].Temperature))
      .text(d.values[d.values.length-1].Year)
    }




     if (d.key == "2017") {
      d3.select(this).style("stroke", "red").style("opacity", 1).style("stroke-width", "2px")

      g.append("text")
      .attr("x", width + 5)
      .attr("y", yScale(d.values[d.values.length-1].Temperature))
      .text(d.values[d.values.length-1].Year)
     }

               counter += 1


  }) // on end




  g.append("text")
  .transition()
  .delay(index * 300)
  .duration(320)
    .attr("x", 50)
    .attr("y", 50)
    .text(this.className.animVal)
    .attr("class", "year_label")
    .transition()
  .duration(0.1)
  .style("opacity", 0)
  .on("end", function(){
     if (this.textContent == 2017) {
        d3.select(this).style("opacity", 1)
     }

  })

    }) // linetransition

中断并重新启动D3中的转换

0 个答案: