圆弧半径在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;});