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 に変わるため、縮小するはずです)。

3 つのアクティブな状態で 2 つをクリックすると、Jim が終了します。2 つから 3 つをクリックすると、Jim はデータセット 03 から適切な半径で入ります。

他の名前でも同じ動作が見られます。いずれの場合でも、開始と終了は機能しますが、2 つのデータセットに同じ名前の要素がある場合、半径は遷移時に更新されません。

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 に答える