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() 模式。