我正在嘗試使用 D3.js 創(chuàng)建一個(gè)包含 3 個(gè)餅圖切片的餅圖。我想用鍵盤輸入值，并且更新值時(shí)（單擊按鈕時(shí)）的過渡應(yīng)該平滑，這就是我使用 merge() 和 transition() 的原因。換句話說，我想做的是調(diào)整這個(gè)給定示例中的代碼：https://www.d3-graph-gallery.com/graph/pie_changeData.html不同之處在于，我希望能夠手動(dòng)輸入值，而不是將它們放在代碼中（最好總是 3 個(gè)餅圖切片）。由于某種原因，我無法真正適應(yīng)代碼。提前致謝。// set the dimensions and margins of the graphvar width = 450height = 450margin = 40// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.var radius = Math.min(width, height) / 2 - margin// append the svg object to the div called 'my_dataviz'var svg = d3.select("#my_dataviz")  .append("svg")  .attr("width", width)  .attr("height", height)  .append("g")  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");// set the color scalevar color = d3.scaleOrdinal()  .domain(["a", "b", "c", "d"])  .range(d3.schemeDark2);// A function that create / update the plot for a given variable:function update() {  var data = d3.selectAll('.fuel').nodes();  var pie = d3.pie() //we create this variable, for the values to be readeable in the console    .value(function(d) {      return d.innerHTML;    })(data);  var u = svg.selectAll("path")    .data(pie)  // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.  u.enter()    .append('path')    .merge(u)    .transition()    .duration(5000)    .attr('d', d3.arc()      .innerRadius(0)      .outerRadius(radius)    )    .attr('fill', function(d) {      return (color(d.data.key))    })    .attr("stroke", "white")    .style("stroke-width", "2px")    .style("opacity", 1)}<meta charset="utf-8"><!-- Load d3.js --><script src="https://d3js.org/d3.v4.js"></script><!-- Color scale --><script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>