D3 - 重置一个SVG对象动画 [英] D3 - Resetting an SVG object animation

问题描述

我做交互式标志图。每个标记沿侧轴开始，点击移动到其沿线的地方，当与生长在大小。我得到了图标移动和成长，但我有麻烦重置图形。我可以使图标回到他们原来的位置与第二个点击，但图标不会回应他们已经点击一次后，再点击。
我怀疑这是简单的东西，但我没有看到它。

I'm making a graph with interactive markers. Each marker begins along the side axis, and when clicked moves to its place along the line and grows in size. I got the icons to move and grow, but am having trouble resetting the graph. I can make the icons go back to their original location with a second click, but the icons won't respond to anymore clicks after they've been clicked a second time. I suspect it's something simple, but I'm not seeing it.

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

我有一大堆的图标，所以我不能泵送用于发送任何图标被激活回到它的轴侧，每当家里一个新的被点击的解决方案。

I have a bunch of icons, so I'd be pumped for a solution that sends whatever icon is activated back to its axis-side home whenever a new one is clicked.

请注意：我正在一个小提琴，小提琴，但我不来任何，所以手指交叉

Note: I'm working on a fiddle, but fiddle and I don't get along whatsoever, so fingers crossed.

推荐答案

您正在连接两个不同的点击左撇子 - 第一个搬到那里，第二个回迁。第二个保持附着，即图标搬回后，它的点击处理程序将其移动到同一个位置（这就是为什么它好像它是不动的）。

You're attaching two different click handers -- the first one to move there and the second one to move back. The second one stays attached, i.e. after the icon has moved back, its click handler will move it to the same position (that's why it seems as if it isn't moving).

您可以做到这一点更优雅（并解决问题），在动态的基础上，当前值的点击处理程序中设置的属性值。

You can do this more elegantly (and fix the problem) by setting the attribute values in the click handler dynamically based on the current values.

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 。数据（）模式。

这篇关于D3 - 重置一个SVG对象动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！