如何让实体触发不同的实体鼠标悬停事件（D3）

Question

我目前正在研究美国的 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 绑定到相应的状态？

Answer 1

只需使用 selection.dispatch，即：

Dispatches a custom event of the specified type to each selected element, in order.

这是一个基本示例，将鼠标悬停在圆圈上将调用给定函数。点击按钮发送一个"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>

如何让实体触发不同的实体鼠标悬停事件（D3）

How to have an entity trigger a different entities mouseover event (D3)

javascript

d3.js