Question

我在d3中遇到麻烦。这个问题说明了问题：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激活：

Joe，Janet和Julie退出
简和约翰进入
但是，吉姆的半径不会改变（它应该缩小，因为d.value从130变为50）

点击两个有三个活动导致Jim退出。单击两个中的三个会导致Jim以数据集03的正确半径进入。

使用其他名称可以看到相同的行为。在所有情况下进入和退出工作，但如果两个数据集具有相同名称的元素，则半径不会在转换时更新

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;});

在d3中转换时圆半径不更新

1 个答案: