1

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

我有一个点击 a 的转换，g它修改了每个g. jsfiddle 应该说清楚。然后点击10然后看看它是如何转换的。118

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)，或者我每次使用时都必须复制/粘贴它？我以为我可以在组上实例化一次转换/持续时间，然后通过子选择器一遍又一遍地重复使用它。对我想要转换的每个元素都这样做是否昂贵？

4

1 回答 1

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（我认为你正在尝试做的事情）。

于 2013-07-02T21:13:11.860 回答