我遇到了一個問題，我嘗試使用 d3.selectAll() 選擇特定的 DOM 元素。例如，假設我有以下資料集。
const dataset = [3, 7, 9, 5, 4]
現在，我想從這個資料集創建 SVG 圓圈
d3.selectAll("circle").data(dataset).join("circle").attr("r", 2).attr("cx", (d,i) => i * 10).attr("cy", 100)
假設我有一個帶有事件監聽器的按鈕，它應該選擇這些圓圈的亂數并更改它們的填充值。我該如何實施？
const button = document.querySelector("button")
button.addEventListener("click", () => {
// what should the code be here?
}
我已經嘗試了如何訪問與 D3 SVG 物件相關的 DOM 元素中的一些建議？但這些僅適用于單個 dom 元素。有沒有辦法通過索引選擇多個 DOM 元素？
uj5u.com熱心網友回復：
不幸的是，您的問題標題和示例之間存在不一致：在標題和最后一段中，您詢問如何通過索引選擇元素，而在示例中您詢問如何選擇亂數量的元素。因此，我將只回答標題問題。
在 D3 選擇中，傳遞給大多數選擇方法的第二個引數是索引。因此，假設您有所需的索引，例如..
[1, 4, 5, 7]
...您只需要使用filter,each或任何其他直接方法來更改您的元素。這是一個簡單的例子，circles是我的圓圈選擇，我根據索引陣列更改它們的填充：
顯示代碼片段
const circles = d3.select("svg")
.selectAll(null)
.data(d3.range(10))
.enter()
.append("circle")
.attr("r", 10)
.attr("cx", (_, i) => i * 25 10)
.attr("cy", 40);
const indicesArray = [1, 4, 5, 7];
circles.filter((_, i) => indicesArray.includes(i))
.style("fill", "tan");<script src="https://d3js.org/d3.v7.min.js"></script>
<svg></svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/462628.html
標籤：javascript d3.js
上一篇：嘗試根據選擇的RadioButton更改網格大小-JavaSwingGUI-SOS棋盤游戲
下一篇：縮放軸有效，但莖線和圓圈不起作用