Javascript 将鼠标悬停的元素数据与选择的每个元素中的数据进行比较

我已经圈出了svg元素，这些元素包含指定它们所代表的区域的数据。 我希望能够悬停每个圆形元素，并使选择中的任何元素高亮显示，如果它们与悬停的元素共享同一区域

我已经读过下面的代码可以实现这一点，但是我很难理解被悬停的元素的值是如何与其他元素的值进行比较的

我知道on函数为mouseover事件的所有选定元素添加了一个事件侦听器，但无法理解这如何导致获得悬停元素的值，以及该元素如何访问其他元素的数据和附加到自身的数据，以便在if中进行比较声明

有人能帮我理解这一点，这样我就可以开始实施这种效果了

d3.select("svg").append("g").attr("id", "teamsG").attr("transform", "translate(50,300)")
.selectAll("g").data(incomingData).enter().append("g").attr("class", "overallG")
.attr("transform",(d,i) =>"translate("+(i * 50)+",9)") 


var teamG = d3.selectAll("g.overallG");

teamG.on("mouseover", highlightRegion);

function highlightRegion(d){
d3.selectAll("g.overallG").select("circle")
.attr("class", p => p.region == d.region ? "active" : "inactive")
}

---

以下是此处唯一重要的功能/方法：

teamG.on("mouseover", highlightRegion);

function highlightRegion(d){
    d3.selectAll("g.overallG").select("circle")
        .attr("class", p => p.region == d.region ? "active" : "inactive")
}

让我们从

“mouseover”

开始。执行此操作时：

teamG.on("mouseover", highlightRegion);

highlightRegion

函数传递了4项内容：

• 第一个参数：元素的基准
• 第二个参数：元素的索引
• 第三个参数：元素的父组

• 此

  ：元素本身

因此，这里的

d

function highlightRegion(d){

。。。是元素的基准。然后，在

highlightRegion

中，有一个

选择.attr

，其中有一个回调函数：

.attr("class", p => p.region == d.region ? "active" : "inactive")

与我们对

selection.on

的调用完全相同，

selection.attr

的回调传递了3个参数，并且

传递了此

。因此，

p

这里是选择中每个元素的基准（即

d3.selectAll（“g.overallG”）。select（“circle”）

）

长话短说：我们有悬停元素（

d

）的数据，在

attr

回调中，我们使用条件运算符将其与选择中每个元素的数据（

p

）进行比较：

p.region == d.region ? "active" : "inactive"

对于该选择中的每个元素，如果其基准属性<代码>区域与悬停元素的基准属性<代码>区域相同（但强制，因为<代码>==），则会获得一个<代码>“活动”类，否则其类为<代码>“非活动”

---

最后，请记住，您可以按照自己的方式命名参数。由于第一个参数是数据，D3开发人员通常将第一个参数命名为

d

（用于数据）。然后，在内部回调中，我个人将第一个参数命名为

e

，然后命名为

f

，依此类推。。。编写该代码的人出于任何原因将其命名为

p

，但这并不重要。

如何进行

选择。on

仅传递触发的元素的数据，即使选择使用了selectAll，因此选择了绑定到

全局

g元素的所有数据（数组）。那么，这两件事不相关。我觉得我在这里遗漏了什么，我仍然对

选择感到困惑。on

只传递悬停元素的数据。这很简单。然后，选择中的

attr

（

d3.selectAll（“g.overallG”）.select（“circle”）

）传递选择中所有元素的数据。现在更清楚了吗？是的，谢谢，我明白了。selectAll只会添加打开的选项。而这一切都在继续。仅访问具有触发事件的图元的基准。这并不像你所说的那样直截了当，没有确认这两个选项是如何协同工作以产生预期效果的。