javascript - 通过鼠标悬停突出显示具有重复名称的圆圈

Question

我有一个搜索框，当所有圈子具有相同的名称时，它会突出显示所有圈子，并淡出不匹配的圈子。一切都按预期工作。

<input class="highlight" name="searchbox" id="searchbox" type="text" list="initname-datalist" placeholder="Search Project/Initiative.." onInput="initiativeSearch(this.value)">
<datalist id="initname-datalist"></datalist>

function initiativeSearch(initSelection) {
  circles.transition()
    .delay(0)
    .duration(500)
    .style("opacity", function(d) {
      return d.data.initiative_name !== initSelection ? 0.5 : 1;
    })
    .style("stroke", function(d) {
      return d.data.initiative_name === initSelection ? "black" : "grey";
    });
}

initiative_name 是我的 CSV 中的列名。我想做类似的事情，但使用 mouseover，所以当用户 mouseover 一个圆圈时，所有其他具有相同名称的圆圈都将突出显示。

我有一个当前的 mouseover，它向被鼠标悬停的圆圈添加黄色描边，还有一个工具提示。我不一定需要保留黄色笔划。

.on("mouseover", function(d) {
      d3.select(this) // highlight the circle that the tooltip relates to
        .transition()
        .delay(0)
        .duration(100)
        .style("stroke", "yellow")
        .style("stroke-width", 5);
      tooltip.transition()
        .duration(200)
        .style("opacity", .95);
      tooltip.html("<strong>" + d.data.initiative_name + "</strong>)
        .style("left", d3.select(this).attr("cx") + "px")
        .style("top", d3.select(this).attr("cy") + "px");
      })
    .on("mouseout", function(d) {
      d3.select(this)
        .transition()
        .delay(0)
        .duration(500)
        .style("stroke", "grey")
        .style("stroke-width", 1);
      tooltip.transition()
        .duration(500)
        .style("opacity", 0);
    });

有什么想法可以使用 mouseover 突出显示具有相同 initiative_name 的所有圈子吗？

Answer 1

如果不使用数据进行实际测试，很难编写解决方案，但这是可能的:

.on("mouseover", function(d) { 
    circles.style("opacity", function(e) {
      return d.data.initiative_name !== e.data.initiative_name ? 0.5 : 1;
    });
    //etc...