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。

无法重复使用过渡

1 个答案: