D3 散点图突出显示与特定数据条件匹配的所有点

D3 scatterchart highlighting all the dots that match a certain data criteria

本文关键字：条件 数据 散点图 显示 D3      更新时间：2023-09-26

我正在尝试突出显示散点图上与悬停的点的 id 匹配的所有点。到目前为止，我有这个功能，但它突出显示了所有点（或者现在将它们变成黑色，但无论如何）。我可以在 d 上使用 parentNode（） 来获取实际点而不仅仅是数据并构建一个新的点数组并以这种方式突出显示它们吗？感觉也许我错过了一个更直接的解决方案。

      dots.on('mouseover', function(d) {
          let dotId = '';
           let dot = d3.select(this)
            .datum(function(x) {
                dotId = x.playerId;
                console.log(dotId);
                return this.dataset; });
           dots.each(function(d){
              console.log(d.playerId);
              if (d.playerId === dotId) {
                  dots.style('stroke', 'black');
              }
            });
        });
      dots.on('mouseout', function(d) {
           //remove stuff
      });
  }
如果我

正确理解了你的问题，这样的事情应该可以解决问题- 

dots.on('mouseover', function(d) {
  var dotId = d.playerId;
  var matches = dots.filter(function(d) { 
     return d.playerId === dotId;
  })
  .style('stroke', 'black');
});

您可以过滤dots并修改原始选择的样式，而不是构建另一个元素数组。

相关文章：