D3 - Сброс анимации объекта SVG

Question

Я делаю график с интерактивными маркерами. Каждый маркер начинается вдоль боковой оси, и когда щелчок перемещается на свое место вдоль линии и растет по размеру. Я получил значки для перемещения и роста, но у меня проблемы с сбросом графика. Я могу сделать значки вернуться в исходное местоположение с помощью второго щелчка, но значки не будут реагировать на больше кликов после того, как они будут нажаты второй раз. Я подозреваю, что это что-то простое, но я этого не вижу.

var coal = svg.append("svg:image") 
    .attr("xlink:href", "nouns/coal.svg") 
    .attr("width", 35) 
    .attr("height", 35) 
    .attr("x", 10) 
    .attr("y", 30) 
    .on("click", function() { 
     coal.transition() 
     .attr("x", 80) 
     .attr("y", 150) 
     .attr("width", 70) 
     .attr("height", 70) 
     .duration(750) 
     .each("end", function() { 
      d3.select(this) 
      .on("click", function() { 
       coal.transition() 
       .attr("width", 35) 
       .attr("height", 35) 
       .attr("x", 10) 
       .attr("y", 30); 
      })      
     }) 
    }); 

У меня есть куча иконок, поэтому я бы перекачивается решение, которое посылает любой значок активируется обратно к его оси стороне дома всякий раз, когда новый нажата.

Примечание: Я работаю на скрипке, но скрипку, и я не лажу, так что пальцы скрещены.

Answer 1

Вы прикрепляете двух разных click рулевых - первый для перемещения туда, а второй для перемещения назад. Второй остается прикрепленным, т. Е. После того, как значок вернется назад, его обработчик кликов переместит его в ту же позицию (поэтому кажется, что он не перемещается).

Вы можете сделать это более элегантно (и устранить проблему), установив значения атрибутов в обработчике кликов динамически на основе текущих значений.

var coal = svg.append("svg:image") 
    .attr("xlink:href", "nouns/coal.svg") 
    .attr("width", 35) 
    .attr("height", 35) 
    .attr("x", 10) 
    .attr("y", 30) 
    .on("click", function() { 
    d3.select(this).transition() 
     .attr("x", function() { return d3.select(this).attr("x") == 10 ? 80 : 10; }) 
     .attr("y", function() { return d3.select(this).attr("y") == 30 ? 150 : 30; }) 
     .attr("width", function() { return d3.select(this).attr("width") == 35 ? 70 : 35; }) 
     .attr("height", function() { return d3.select(this).attr("height") == 35 ? 70 : 35; }) 
     .duration(750); 
    }); 

Было бы еще более элегантно основывать всю вещь на данных, т.е. есть массив, который содержит два элемента, которые определяют положение и размер и чередуются между ними. В этом случае вы также можете использовать обычный шаблон D3 .data().