點擊d3.js第一次無效

Question

我正在嘗試通過從輸入中獲取數據來制作d3餅圖。 單擊時功能在第一次單擊時無需轉換。 當我第一次單擊該按鈕時，餅圖會更新，但不會過渡。 下次正常工作。

 var input = document.querySelectorAll(".input-block__item") var data = [input[0].value, input[1].value, input[2].value, input[3].value] var width = 560, height = 500, radius = Math.min(width, height) / 2; var color = d3.scaleOrdinal(d3.schemeAccent) var arc = d3.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.pie() .sort(null) .value(function(d,i) { return d; }); var svg = d3.select(".pie-block").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var block = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc") block.append("path") .attr("d", arc) .style("fill", function(d) { return color(d.data); }); block.data(pie(data)) .transition() .duration(1000) .ease(d3.easeLinear) .attrTween("d", arc2Tween); //update function arc2Tween(d) { var interp = d3.interpolate(this._current, d); this._current = d; return function(t) { var tmp = interp(t); return arc(tmp); } }; d3.select(".mybtn") .on("click", function update() { var data = [input[0].value, input[1].value, input[2].value, input[3].value] block.select("path") .data(pie(data)) .transition() .duration(1000) .ease(d3.easeLinear) .attrTween("d", arc2Tween); }); 

 <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <a href="#" class="mybtn">Show</a> <div class="container"> <div class="input-block"> <input type="text" value="1" class="input-block__item input-block__item--1"> <input type="text" value="2" class="input-block__item input-block__item--2"> <input type="text" value="3" class="input-block__item input-block__item--3"> <input type="text" value="4" class="input-block__item input-block__item--4"> </div> <div class="pie-block"> </div> </div> 

Answer 1

CodePen中的這支筆應顯示過渡按預期工作。 老實說，我沒有最好的最佳實踐。 我只是注意到，在原始代碼段中，第一次單擊時數據綁定似乎正在運行兩次：一次是原始數據，然后是新數據。

我試圖將您的更新邏輯分離為遵循D3常規更新模式的函數。 我最初的嘗試並沒有真正起作用。 我將var block移回外部范圍，然后將enter邏輯移回外部范圍，然后它開始工作。

 var input = document.querySelectorAll(".input-block__item"); var data = [input[0].value, input[1].value, input[2].value, input[3].value]; var width = 560, height = 500, radius = Math.min(width, height) / 2; var color = d3.scaleOrdinal(d3.schemeAccent) var arc = d3.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.pie() .sort(null) .value(function(d,i) { return d; }); var svg = d3.select(".pie-block").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // join var block = svg .selectAll(".arc") .data(pie(data)); // enter block.enter() .append("g") .attr("class", "arc") .append("path") .attr("d", arc) .style("fill", function(d) { return color(d.data); }); // initial data update update(data); function arc2Tween(d) { var interp = d3.interpolate(this._current, d); this._current = d; return function(t) { var tmp = interp(t); return arc(tmp); } }; d3.select(".mybtn") .on("click", function () { update([input[0].value, input[1].value, input[2].value, input[3].value]); }); function update(data) { // join block = svg .selectAll(".arc") .data(pie(data)); // update block.select("path") .transition() .duration(1000) .ease(d3.easeLinear) .attrTween("d", arc2Tween); } 

 <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <a href="#" class="mybtn">Show</a> <div class="container"> <div class="input-block"> <input type="text" value="1" class="input-block__item input-block__item--1"> <input type="text" value="2" class="input-block__item input-block__item--2"> <input type="text" value="3" class="input-block__item input-block__item--3"> <input type="text" value="4" class="input-block__item input-block__item--4"> </div> <div class="pie-block"> </div> </div>