我正在構建一個“燃盡”d3 折線圖，試圖根據范圍和歷史資料預測趨勢。
一個下拉框選擇要顯示的資料，理想情況下在行之間轉換，但是我在清除以前顯示的資料時遇到了麻煩，而是將新行寫入現有行。
鏈接到 jsfiddle：https ://jsfiddle.net/dgf1vts8/
目前這樣做（第329行）：
svg.append("path")
.datum(selectedData)
.attr("class", "line")
.attr("d", line);
我嘗試過但沒有奏效的其他方法（第 318 行）
var lines = svg.selectAll(".line").data(selectedData).attr("class","line");
lines.transition().duration(500).attr("d",line);
lines.enter()
.append("path")
.attr("class","line")
.attr("d",line);
lines.exit()
.remove();
對此的任何指導將不勝感激
uj5u.com熱心網友回復：
由于您只在更新函式中附加新物件，因此每次呼叫該函式時都會在圖表中添加一個新行。
最簡單的解決方法是在添加新路徑物件之前洗掉所有路徑物件。
svg.selectAll("path").remove();
但是，為此的進入-更新-退出邏輯將是
var lines = svg.selectAll(".line").data(selectedGroup);
lines.enter() // enter any new data
.append("path")
.attr("class", "line")
.merge(lines)
.datum(selectedData)
.attr("d", line);
lines.exit() // exit
.remove();
線的邏輯與點或條的邏輯不同，您需要為時間序列的每個資料點創建一個物件。對于線條，您只需創建一個路徑物件。這就是為什么資料系結到選擇
svg.selectAll(".line")
應該是行的標簽。如果您使用多行，通常最好嵌套陣列。
如果您開始一個新專案，您可能應該使用當前版本 d3v7 而不是 d3v3，因為發生了破壞兼容性的重大更改。我減少了您的小提琴并更改了所有部件以使其與 d3v7 一起使用：https ://jsfiddle.net/esd4kofr/1/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427189.html
標籤：javascript d3.js
上一篇：CSS影片在重復幾次后停止作業