無法再利用的轉變

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。