我剛開始學習 D3Js，我正在為一個基本的想法而苦苦掙扎。
假設我有一個陣列：
let arr = [a, b, c, d];
而且，我在 HTML 中有一個按鈕
<input type="button" id="btn" value="Click">
使用d3js，我想列印出（例如，console.log）以按順序一個一個列印陣列中的元素。換句話說，第一次按鈕點擊列印'a'，第二次點擊'b'，依此類推，然后在點擊最后一個元素后再次從'a'開始。
以下是我的嘗試，但無效。
d3.select("#btn").data(arr).enter().on("click", function(d) { return console.log(d)});
有人可以幫助我了解如何使其作業嗎？
謝謝。
uj5u.com熱心網友回復：
如果我理解正確，我們可以很容易地做到這一點（有或沒有 D3）。當你問到 D3 時，我會用它來展示一個解決方案。
您正在使用 .data() 和 .enter() - 當您想為資料陣列中的每個專案（資料）創建一個元素時使用它們 - 但您只有一個已經存在的元素。由于我們不需要輸入任何內容并且我們只有一個資料，因此這兩種方法不是您要尋找的。此外， enter 通常跟在 .append() 之后，它創建輸入的元素 - 否則您不會將 on 偵聽器分配給任何可點擊的元素。
相反，我們可以將包含一組值的單個資料系結到按鈕：
.datum(arr)
但是，我們可以通過為當前索引包含一個屬性來創建一個比這更有用的資料，以便我們需要的一切都是自包含的：
.datum({i:0,arr:arr})
然后我們可以為訪問資料的按鈕分配一個單擊偵聽器，記錄 的值arr[i]和 增量i。下面我使用模數運算子來避免將 i 重置為 0：
顯示代碼片段
let arr = ["a", "b", "c", "d"];
d3.select("input")
.datum({i:0, arr:arr })
.on("click", function(d) {
console.log(d.arr[d.i %d.arr.length])
})<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<input type="button" id="btn" value="Click">轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/348477.html
下一篇：我想自定義點圖