Animation D3-重置SVG对象动画

我正在用交互式标记制作一个图表。每个标记都沿边轴开始，单击时会沿直线移动到其位置并增大大小。我得到了图标移动和增长，但我有麻烦重置图表。我可以通过第二次单击使图标返回其原始位置，但在第二次单击后，图标将不再响应任何单击。 我怀疑这很简单，但我没看到

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);
            })                      
        })
    });

我有一堆图标，所以我会被一个解决方案吸引，每当点击一个新图标时，这个解决方案会将激活的图标发送回它的axis端主页

---

注意：我正在用小提琴，但是小提琴和我相处得不好，所以祈祷吧。

您正在附加两个不同的

单击手-第一个移动到那里，第二个移动到后面。第二个图标保持连接，即图标向后移动后，其单击处理程序将其移动到相同的位置（这就是为什么它看起来好像没有移动）

通过基于当前值动态设置单击处理程序中的属性值，可以更优雅地完成此操作（并解决问题）

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（）
模式。
您又这样做了，Lars。非常感谢。我会根据数据来处理。那是个好主意。