1 回答

TA貢獻1895條經驗 獲得超7個贊
D3v3 神奇地將輸入選擇包含在更新選擇中,在幕后為您進行合并。從 d3v4 開始,您需要顯式合并輸入和更新。
要編碼合并更新并輸入 d3v3,您基本上只需刪除合并語句并在輸入所有內容后使用更新選擇即可。代替:
var update = d3.selectAll("...").data(...);
enter = update.enter().append()....
update.merge(enter).attr(....
您可以簡單地使用:
var update = d3.selectAll("...").data(...)
update.enter().append()....
update.attr(... // includes both enter and update.
本質上,d3v4 的變化是選擇是不可變的,輸入選擇后不再神奇地添加到幕后的更新選擇中。然而,為了允許組合輸入和更新選擇,d3引入了selection.merge()通過組合兩者返回新選擇的方法。
以下是幾個片段,顯示了 d3v3(第一)與 d3v4+(第二)在每個步驟的每個選擇中的內容:
var original = d3.selectAll("p")
.data([1,2,3])
.enter()
.append("p")
original.append("span").text(d=>d);
// update selection pre enter.
var update = d3.selectAll("p")
.data([1,2,3,4,5]) // two new elements.
update.append("span")
.text(" in update selection pre enter");
// enter selection.
var enter = update.enter()
.append("p")
enter.append("span").text(d=>d + " in enter selection");
// update post-enter.
update.append("span").text(" | in update selection after enter");
p {
border: 1px dotted black;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
與
var original = d3.selectAll("p")
.data([1,2,3])
.enter()
.append("p")
original.append("span").text(d=>d);
// update selection pre enter.
var update = d3.selectAll("p")
.data([1,2,3,4,5]) // two new elements.
update.append("span")
.text(" in update selection pre enter");
// enter selection.
var enter = update.enter()
.append("p")
enter.append("span").text(d=>d + " in enter selection");
// update post-enter.
update.append("span").text(" | in update selection after enter");
// merge:
update.merge(enter).append("span").text(" | in merged selection ");
p {
border: 1px dotted black;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
添加回答
舉報