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);
    });

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

Answer 1

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

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

Answer 2

像这样在鼠标悬停时致电initiativeSearch()

.on("mouseover", function(d) {
   initiativeSearch(d.data.initiative_name);  
}

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

2 个答案: