4

我在 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 的值的示例：在按钮 1 处于活动状态时单击按钮 3：

  • 乔、珍妮特和朱莉退出
  • 简和约翰进入
  • 但是，Jim 的半径没有改变（它应该缩小，因为 d.value 从 130 变为 50）

在三个活动的情况下单击两个会导致 Jim 退出。单击两个中的三个会导致 Jim 以 dataset03 中的正确半径输入。

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

4

1 回答 1

6

您可能必须专门为过渡选择圆圈，而不是尝试在外部组元素上进行。所以代替这个：

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;});
于 2013-04-23T04:04:03.847 回答