D3新しいデータを含むドーナツが適切に描画されない

Question

D3が新しく、新しいデータでドーナツチャートを更新しようとしています。

データがスワップされると、計算されたセグメントが間違っています。一見、チャートは適切なドーナツのように見えるかもしれませんが、ドーナツを調べると、セグメントの1つがドーナツ全体のサイズであることがわかります。

jsfiddle

Iは完全にドーナツチャートを再描画するコードのコメント行が含まれていました。コメントを外すと、グラフがどのように表示されるのかがわかります。

更新機能：

function updateDonut(selector, dataset){ 
    var width = 120; 
    var height = 120; 
    var donutWidth = 25; 
    var radius = Math.min(width, height)/2; 
    var color = d3.scale.category20c(); 

    var pie = d3.layout.pie() 
    .value(function(d) { 
    return d.values; 
    }) 
    .sort(null); 

    var arc = d3.svg.arc() 
    .innerRadius(radius - donutWidth) 
    .outerRadius(radius); 

    var svg = d3.select(selector).select("svg > g"); 

    if(svg.empty()){ 
    svg = d3.select(selector) 
     .append('svg') 
     .attr('width', width) 
     .attr('height', height) 
     .append('g') 
     .attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')'); 
    } 

    /*Uncommenting below line shows donut should look like*/ 
    //svg.selectAll("path").remove(); 

    var path = svg.selectAll("path"); 
    path = path.data(pie(dataset)); 

    path.enter().append("path") 
    .attr("fill", function(d, i) { return color(i) }) 
    .attr("d", arc) 

    path.exit().remove() 
} 

Answer 1

あなたがデータセットを切り替えるたび、あなたのどちらかが、既存のSVG構造を削除するか、それらをリセットする必要があります。あなたはこのようにそれらを削除することができ、残りのコードでは、新しい構造を作成します。

if(d3.select(selector)) 
d3.select(selector).select("svg").remove(); 

ここで働いフィドルです：https://jsfiddle.net/swevens/Lb2temc8/17/

は、