新しいデータでd3.jsサークルを更新しようとしています

Question

最近私は自分自身にD3を教えようとし始めました。私は入力、更新、終了のパラダイムに頭を下げています。

以下は、私が作業しようとしている進行中のサークルの例です。今

http://plnkr.co/edit/OoIL8v6FemzjzoloJxtQ?p=preview

ここでの目的は、それらを削除せずにサークルパスを更新することであるように、私はexit関数を使用すべきではないと考えていますか？その場合、私は新しい関数の中で自分のデータソースを更新してパスの遷移を呼び出すことができたという印象を受けました。私は更新された値を取得します。しかし、そうではありません。

誰かが私を助けて、私が間違っているところを私に見せることができるのだろうかと思っていましたか？

var dataset = [{ 
    "vendor-name": "HP", 
    "overall-score": 45 
}, { 
    "vendor-name": "CQ", 
    "overall-score": 86 
}]; 

var dataset2 = [{ 
    "vendor-name": "HP", 
    "overall-score": 22 
}, { 
    "vendor-name": "CQ", 
    "overall-score": 46 
}]; 

var width = 105, 
    height = 105, 
    innerRadius = 85; 

var drawArc = d3.svg.arc() 
    .innerRadius(innerRadius/2) 
    .outerRadius(width/2) 
    .startAngle(0); 

var vis = d3.select("#chart").selectAll("svg") 
    .data(dataset) 
    .enter() 
    .append('svg') 
    .attr('width', width) 
    .attr('height', height) 
    .append('g') 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

vis.append("circle") 
    .attr("fill", "#ffffff") 
    .attr("stroke", "#dfe5e6") 
    .attr("stroke-width", 1) 
    .attr('r', width/2); 

vis.append("path") 
    .attr("fill", "#21addd") 
    .attr('class', 'arc') 
    .each(function(d) { 
    d.endAngle = 0; 
    }) 
    .attr('d', drawArc) 

.transition() 
    .duration(1200) 
    .ease('linear') 
    .call(arcTween); 

vis.append('text') 
    .text(0) 
    .attr("class", "perc") 
    .attr("text-anchor", "middle") 
    .attr('font-size', '36px') 
    .attr("y", +10) 
    .transition() 
    .duration(1200) 
    .tween(".percentage", function(d) { 
    var i = d3.interpolate(this.textContent, d['overall-score']), 
     prec = (d.value + "").split("."), 
     round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1; 
    return function(t) { 
     this.textContent = Math.round(i(t) * round)/round + "%"; 
    }; 
    }); 


function updateChart() { 
    vis = vis.data(dataset2) 
    vis.selectAll("path") 
    .transition() 
    .duration(1200) 
    .ease('linear') 
    .call(arcTween); 
    vis.selectAll('text') 
    .transition() 
    .duration(1200) 
    .tween(".percentage", function(d) { 
     var i = d3.interpolate(this.textContent, d['overall-score']), 
     prec = (d.value + "").split("."), 
     round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1; 
     return function(t) { 
     this.textContent = Math.round(i(t) * round)/round + "%"; 
     }; 
    }); 

} 

function arcTween(transition, newAngle) { 

    transition.attrTween("d", function(d) { 

    var interpolate = d3.interpolate(0, 360 * (d['overall-score']/100) * Math.PI/180); 

    return function(t) { 

     d.endAngle = interpolate(t) 

     return drawArc(d); 
    }; 
    }); 
} 

ご迷惑をおかけして申し訳ありません。

おかげで、すべての

Answer 1

あなたはDOMを通して、あなたのデータを更新する必要がある - SVG> G>パス：

// SET DATA TO SVG 
var svg = d3.selectAll("svg") 
      .data(selectedDataset) 

// SET DATA TO G 
var g = svg.selectAll('g') 
      .data(function(d){return [d];}) 

// SET DATA TO PATH 
var path = g.selectAll('path') 
      .data(function(d){ return [d]; }); 

は、各ステップのD3のDOMデータバインドオブジェクトを保存あなたが入力したのコントロールを持つことができます（）、extit（）、およびtransition（）要素を使用します。

// PATH ENTER 
path.enter() 
    .append("path") 
    .attr("fill", "#21addd") 
    .attr('class', 'arc') 
// PATH TRANSITION 
path.transition() 
    .duration(1200) 
    .ease('linear') 
    .attr('d', function(d){ console.log(d);drawArc(d)}) 
    .call(arcTween); 

http://plnkr.co/edit/gm2zpDdBdQZ62YHhDbLb?p=preview