我目前正在研究美國的 GeoJSON，每個州都有一個滑鼠懸停事件（例如，發生的一件事是它將州的邊界更改為鮮紅色以顯示哪個州被突出顯示）。
有些州相當小，尤其是在新英格蘭。我試圖想出一種方法來解決這個問題，并決定在側面實作額外的按鈕，這些按鈕將具有與我認為很小的特定狀態相關聯的相同滑鼠懸停事件。
我的問題是：當滑鼠懸停在附加按鈕上時，我將如何獲得諸如突出顯示州邊界之類的事情。
我目前對原始狀態的實作如下（我還沒有開始處理附加按鈕）：
.on("mouseover", function(d) {
d3.select(event.target).attr("stroke", "red").attr("stroke-width", "3");
displayData(d); })
.on("mouseout", function(d) {
d3.select(event.target).attr("stroke", "black").attr("stroke-width", "1");
hideData(d); });
displayData(d) 和 hideData(d) 用于工具提示的顯示。如您所見，滑鼠懸停現在的作業方式是捕獲 event.target。我將如何為單獨的按鈕復制這個？是否有可能以某種方式將該按鈕的 event.target 系結到相應的狀態？
uj5u.com熱心網友回復：
只需使用selection.dispatch，其中：
按順序將指定型別的自定義事件分派給每個選定元素。
這是一個基本示例，將滑鼠懸停在圓圈上將呼叫給定的函式。單擊按鈕將 a"mouseover"發送到第二個圓圈。
顯示代碼片段
const svg = d3.select("svg");
const circles = svg.selectAll(null)
.data(["foo", "bar", "baz"])
.enter()
.append("circle")
.attr("id", (_, i) => `id${i}`)
.attr("cy", 70)
.attr("cx", (_, i) => 30 100 * i)
.attr("r", 30)
.style("fill", "teal")
.on("mouseover", (event, d) => {
console.log(`My name is ${d}`);
});
d3.select("button").on("click", () => d3.select("#id1").dispatch("mouseover"));.as-console-wrapper { max-height: 15% !important;}<script src="https://d3js.org/d3.v7.min.js"></script>
<button>Click me</button>
<svg></svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/348475.html
標籤：javascript d3.js