Флеш d3 v4 переход

Кто-нибудь знает способ «очистить» переход? У меня есть переход, определенный следующим образом:

this.paths.attr('transform', null)
  .transition()
  .duration(this.duration)
  .ease(d3.easeLinear)
  .attr('transform', 'translate(' + this.xScale(translationX) + ', 0)')

Я знаю, что могу сделать

this.paths.interrupt();

чтобы остановить переход, но это не заканчивает мою анимацию. Я хотел бы иметь возможность «очистить» переход, который немедленно завершит анимацию.

9 голосов | спросил Gabriel 22 Jpm1000000pmMon, 22 Jan 2018 17:15:16 +030018 2018, 17:15:16

1 ответ


0

Ответ Эндрю великолепен. Однако ради любопытства я считаю, что это можно сделать без расширения прототипов, используя .on("interrupt" в качестве прослушивателя.

Здесь я бесстыдно копирую код Эндрю для переходов и этот ответ для получения целевого атрибута.

selection.on("click", function() {
    d3.select(this).interrupt()
})

transition.on("interrupt", function() {
    var elem = this;
    var targetValue = d3.active(this)
        .attrTween("cx")
        .call(this)(1);
    d3.select(this).attr("cx", targetValue)
})

Вот демоверсия:

 var svg = d3.select("svg")

var circle = svg.selectAll("circle")
  .data([1, 2, 3, 4, 5, 6, 7, 8])
  .enter()
  .append("circle")
  .attr("cx", 50)
  .attr("cy", function(d) {
    return d * 50
  })
  .attr("r", 20)
  .on("click", function() {
    d3.select(this).interrupt()
  })

circle
  .transition()
  .delay(function(d) {
    return d * 500;
  })
  .duration(function(d) {
    return d * 5000;
  })
  .attr("cx", 460)
  .on("interrupt", function() {
    var elem = this;
    var targetValue = d3.active(this)
      .attrTween("cx")
      .call(this)(1);
    d3.select(this).attr("cx", targetValue)
  })
 <script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="500"></svg>

PS: в отличие от ответа Эндрю , поскольку я использую d3.active(node) здесь, клик работает, только если переход уже начался .

ответил Gerardo Furtado 23 Jam1000000amTue, 23 Jan 2018 02:24:26 +030018 2018, 02:24:26

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132