无法重复使用过渡

Question

JsFiddle：http://jsfiddle.net/kKvtJ/5/

单击g 时我有一个转换，它修改了每个g 中的几个元素。 jsfiddle 应该说清楚。点击10，然后点击11，然后点击8，看看它是如何转换的。

nodes_enter.on('click', function(d, i) {
    var all_transition = d3.selectAll('g.bar').transition().duration(500);
    var this_transition = d3.select(this).transition().duration(500);
    all_transition.select('line').attr('opacity',0);
    all_transition.select('text').style('fill','white').attr('x',0);
    this_transition.select('line').attr('opacity',1);
    this_transition.select('text').style('fill','black').attr('x',40);

    // works
    d3.selectAll('g.bar').transition().duration(500)
    // doesn't work
    // all_transition
      .attr('transform', function (e, j) {
          return 'translate(' + (j * 30 + (j > i ? 30 : 0)) + ',0)'
      });
});

效果很好。

但是，如果我将最后一个转换的选择器更改为 all_transition，从左到右单击组时它无法正常工作。很奇怪。

如果我在变换中console.log，它将显示每个组的正确坐标。浏览器不会重新渲染更新的转换。

我做错了吗？是否有更可接受的方式重新使用.transition().duration(500)，还是每次使用时都必须复制/粘贴？我想我可以在组上实例化一次转换/持续时间，然后通过子选择器一遍又一遍地重复使用它。对我想要转换的 每个 元素执行此操作是否昂贵？

Answer 1

问题不在于您要保存过渡，而在于您有多个干扰过渡。 d3.select(this) 是 d3.selectAll("g.bar") 的一个子集，您正在独立地将转换附加到两者。因此，您会得到不同的计时器同时修改属性值，并且会发生不好的事情。

不过，您不需要第二个转换，您可以根据第一个定义所有内容。您只需选择所有相应的元素并在设置值之前检查数据。

var all_transition = d3.selectAll('g.bar').transition().duration(500);
all_transition.selectAll('line').attr('opacity',function(e) { return e == d ? 1 : 0; });
all_transition.selectAll('text').attr('x', function(e) { return e == d ? 40 : 0; });

更新了 jsfiddle（我认为你正在尝试做的事情）here。