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

【问题标题】：How to have an entity trigger a different entities mouseover event (D3)如何让实体触发不同的实体鼠标悬停事件（D3）
【发布时间】：2021-12-18 09:29:01
【问题描述】：

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

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

只需使用selection.dispatch，即：

按顺序将指定类型的自定义事件分配给每个选定元素。

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

【讨论】：