Question

我圈了圈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")
}

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函数传递了四件事：

第一个参数：元素的基准；
第二个参数：元素的索引；
第三个参数：元素的父组；
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），则它会得到一个{{ 1}}类，否则其类为"active"。

最后，请记住，您可以使用所需的方式来命名参数。由于第一个参数是基准，因此D3开发人员通常将第一个参数命名为"inactive"（用于基准）。然后，在内部回调中，我个人将第一个参数命名为d，然后命名为e，依此类推...编写该代码的人将其命名为f无论出于什么原因，但这都没关系。

将鼠标悬停的元素数据与所选内容的每个元素中的数据进行比较

1 个答案: