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

我有一堆图标，所以我会寻求一种解决方案，每当单击新图标时，将激活的任何图标发送回其轴侧主页。

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

您附加了两个不同的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()图案。