使用特定顏色更新餅圖無法正常工作

Question

看看這個小提琴（ http://jsfiddle.net/gs6rehnx/2106/ ），有四個帶有四種不同顏色的弧。 我希望單擊更新按鈕后，餅圖具有三種顏色。 但是，仍然存在四個弧。 我保證， 特定顏色到values的映射不能正常工作？ 還是其他東西不起作用？

 const chart = {}; const duration = 750; const width = 160; const height = 160; const min = Math.min(width, height); const oRadius = min / 2 * 0.9; const iRadius = min / 2.5 * 0.85; const pie = d3 .pie() .value(function(d) { return d.value; }) .sort(null); const arc = d3 .arc() .outerRadius(oRadius) .innerRadius(iRadius); function arcTween(a) { const i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arc(i(t)); }; }; const labels = ['1', '2', '3', '4']; const color = ["rgba(126,211,33,1)", "rgba(39,173,232,1)", "rgba(229,5,1,1)", "rgba(245,166,35,1)"]; const scale = d3.scaleOrdinal() .domain(labels) .range(color); const create = function(data) { const svg = d3 .select('.foo') .append('svg') .attr('class', 'pie') .attr('width', width) .attr('height', height) .attr('id', 'svgClass'); svg .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')') .attr('id', 'bar'); draw(data); } const draw = function(data) { const path = d3.select('#bar') .selectAll('path') .data(pie(data)) path .enter() .append('g') .append('path') .attr('d', arc) .attr('fill', (d, i) => { return scale(d.data.name) }); path .transition() .duration(duration) .attrTween('d', function(d) { const interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d); return function(t) { return arc(interpolate(t)); }; }); }; const data = [{ "name": "1", "value": 2 }, { "name": "2", "value": 1 }, { "name": "3", "value": 2 }, { "name": "4", "value": 1 }]; const newData = [{ "name": "1", "value": 2 }, { "name": "2", "value": 1 }, { "name": "3", "value": 2 }]; function createPie() { create(data) } function updatePie() { draw(newData) } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script> <button type="button" onclick="createPie()">Click Me First!</button> <button type="button" onclick="updatePie()">Update Diagram!</button> <div class='foo'></div> 

Answer 1

之所以不起作用，是因為d3有三個主要選擇部分：

• 輸入
• 更新
• 出口

在上面的示例中，您正在處理enter ， update不是很正確，並且exit完全丟失。 這是作者討論數據連接的一篇非常好的文章。

輸入

以下內容將捕獲所有new數據元素，並為每個元素添加一個新的g元素。

path.enter().append('g')

出口

您所缺少的以下內容將采用DOM中不再在數據中表示的所有項目，並將其刪除。

path.exit().remove();

 const chart = {}; const duration = 750; const width = 160; const height = 160; const min = Math.min(width, height); const oRadius = min / 2 * 0.9; const iRadius = min / 2.5 * 0.85; const pie = d3 .pie() .value(function(d) { return d.value; }) .sort(null); const arc = d3 .arc() .outerRadius(oRadius) .innerRadius(iRadius); function arcTween(a) { const i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arc(i(t)); }; }; const labels = ['1', '2', '3', '4']; const color = ["rgba(126,211,33,1)", "rgba(39,173,232,1)", "rgba(229,5,1,1)", "rgba(245,166,35,1)"]; const scale = d3.scaleOrdinal() .domain(labels) .range(color); const create = function(data) { const svg = d3 .select('.foo') .append('svg') .attr('class', 'pie') .attr('width', width) .attr('height', height) .attr('id', 'svgClass'); svg .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')') .attr('id', 'bar'); draw(data); } const draw = function(data) { const path = d3.select('#bar') .selectAll('path') .data(pie(data)) path .enter() .append('g') .append('path') .attr('d', arc) .attr('fill', (d, i) => { return scale(d.data.name) }); path.exit().remove(); path .transition() .duration(duration) .attrTween('d', function(d) { const interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d); return function(t) { return arc(interpolate(t)); }; }); }; const data = [{ "name": "1", "value": 2 }, { "name": "2", "value": 1 }, { "name": "3", "value": 2 }, { "name": "4", "value": 1 }]; const newData = [{ "name": "1", "value": 2 }, { "name": "2", "value": 1 }, { "name": "3", "value": 2 }]; function createPie() { create(data) } function updatePie() { draw(newData) } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script> <button type="button" onclick="createPie()">Click Me First!</button> <button type="button" onclick="updatePie()">Update Diagram!</button> <div class='foo'></div>