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

进入和退出的行为与预期一样，但对于进入和退出数据集中存在的名称，圆半径没有改变。

使用 Jim 的值的示例： 在按钮一处于活动状态时单击按钮三：

• 乔、珍妮特和朱莉退出
• 简和约翰进入
• 但是，Jim 的半径没有改变（它应该缩小，因为 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;});

更新：以下是另一种更适合重用现有数据/选择的整体 D3 理念的方式：

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