圓弧半徑在d3轉換時未更新

Question

我在d3中遇到轉換問題。這個jsfiddle說明了這個問題：http://jsfiddle.net/3bzsE/

當頁面加載時，使用dataset01爲數組中的每個人創建一個圓。 d.name被用作密鑰。

圖表下面的藍色矩形是更新點擊數據的按鈕。

這裏是更新功能可按：

function updateVis(data) { 
    var points = svg.selectAll('.nameinfo') 
     .data(data, function(d) { return d.name;}); 

    var pointsEnter = points 
     .enter() 
     .append('g') 
     .attr('class', 'nameinfo'); 

    pointsEnter 
     .append('circle') 
     .attr('cx', function(d) { return 10 + d.position * 100; }) 
     .attr('cy', width/2) 
     .attr('r', 0) 
     .style('fill', function(d) { return z(d.position); }) 
     .style('fill-opacity', 0.5) 
     .style('stroke', '#232323') 
     .append("title") 
     .text(function(d) { return d.name; }); 


    pointsEnter 
     .append('text') 
     .attr('x', function(d) { return 10 + d.position * 100; }) 
     .attr('y', width/2) 
     .attr("dy", "0.35em") 
     .style("text-anchor", "middle") 
     .style("font-size", "11px") 
     .text(function(d, i) { return d.name; }); 

    pointsUpdate = points 
     .selectAll('circle') 
     .transition().duration(500) 
     .attr('r', function(d){ return d.value/2;}); 

    var pointsExit = points.exit().transition().duration(500).remove(); 

    pointsExit 
     .selectAll('circle') 
     .attr('r', 0); 
} 

的進入和退出的行爲符合市場預期，但圓半徑不改變對存在的進入和退出的數據集的名字。

使用值吉姆一個例子： 點擊按鈕三連扣一個活動：

• 喬，珍妮特和朱莉退出
• 簡和約翰進入
• 但是，吉姆的半徑（它應該縮小，因爲d.value從130變爲50）

點擊兩個帶有三個活動原因的Jim退出。點擊兩個中的三個，導致Jim從dataset03以正確的半徑輸入。

相同的行爲可以看到與其他名稱。在所有情況下進入和退出工作，但是如果兩個數據集具有相同名稱的元素，則在過渡時不會更新半徑

Answer 1

您可能必須專門爲過渡選擇圓圈，而不是嘗試在外側執行組元素。因此，而不是這樣的：

pointsUpdate = points 
    .selectAll('circle') 
    .transition().duration(500) 
    .attr('r', function(d){ return d.value/2;}); 

這樣做：

svg.selectAll('.nameinfo circle') 
    .data(data, function(d) { return d.name;}) 
    .transition().duration(500) 
    .attr('r', function(d){ return d.value/2;}); 

UPDATE：下面是適合與重用現有的數據/選擇整體D3理念更好的另一種方式：

points 
    .select('circle').transition().duration(500) 
    .attr('r', function(d){ return d.value/2;});