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

Question

我圈出了 svg 元素，其中包含指定它们所代表区域的数据。我希望能够悬停每个圆圈元素，并突出显示所选内容中的任何元素(如果它们与悬停在其上的元素共享同一区域)。

我读过这可以通过以下代码实现，但我无法理解如何将悬停元素的值与其他元素的值进行比较。

我知道 on 函数为鼠标悬停事件的所有选定元素添加了一个事件监听器，但无法理解这如何导致获得悬停在其上的元素的值以及该元素如何访问这两个元素来自其他元素的数据和附加到自身的数据，以便在 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")
}

Answer 1

这些是这里唯一重要的函数/方法:

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 个东西:

• 第一个参数:元素的数据；
• 第二个参数:元素的索引；
• 第三个参数:元素的父组；
• this:元素本身；

因此，这里的d...

function highlightRegion(d){

... 是元素的数据。然后，在 highlightRegion 里面，有一个 selection.attr 有一个函数作为回调:

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

与我们为 selection.on 所做的完全一样，selection.attr 的回调传递了 3 个参数和 this。因此，此处的 p 是选择中每个元素的数据(即 d3.selectAll("g.overallG").select("circle"))。

长话短说:我们有悬停元素的数据 (d)，在 attr 回调中，我们将它与选择中每个元素的数据 (p)，使用条件运算符:

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

对于该选择中的每个元素，如果其数据属性 region 与数据属性 region 相同(但强制转换，因为 ==) > 悬停元素的它获得一个 "active" 类，否则它的类是 "inactive"。

最后，请记住，您可以按照自己的方式命名参数。由于第一个参数是数据，D3 开发人员通常将第一个参数命名为 d(代表数据)。然后，在内部回调中，我个人将第一个参数命名为 e，然后是 f，依此类推......编写该代码的人将其命名为as p 无论出于何种原因，但这并不重要。