在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值的示例:单击按钮3,按钮1激活:

• 乔,珍妮特和朱莉退出
• 简和约翰进来
• 但是,吉姆的半径不会改变(它应该缩小,因为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;});